DOM+position:relative+缓冲运动
一、nodeType节点类型
nodeType==3 ->文本节点
nodeType==1 ->元素节点
for（var i=0;i<oUl.childNodes.length;i++ ）{ //此处的oUl是 var oUl = document.getElementById('ul');获取ul标签的保存值
//alert(oUl.childNodes[i].nodeType)不同版本浏览器观看返回值,就清楚返回1和3的区别
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
用childNodes的话，倒不如用children。
alert(oUl.children.length);
二、父节点parentNode的应用
for(var i=0;i<aA.length;i++){ //少一部分代码，有点懒打上去
aA[i].onclick = function(){
this.parentNode.style.display= 'none'; //这里的父节点指li，所以是获取a标签
};
}
};
<head> //html代码开始
<body>
<ul>
<li>dsfasdfsfasd<a>隐藏</a></li>
<li>dsfasdfsfasd<a>隐藏</a></li>
<li>dsfasdfsfasd<a>隐藏</a></li>
<li>dsfasdfsfasd<a>隐藏</a></li>
</ul>
三、position：relative
先定义两个div样式
#div1 { width:200px;height:200px;background:#CCC;}
#div2 {width:100px;height:100px;background:red;position:absolute;}//先设置div2 绝对定位
<div id='div1'>
<div id='div2'></div> //div1包含div2
</div>
div2绝对定位时，是如图这样子的
但是更改div1的位置的时候，div1移动，但是div2还是好好保留在原来的位置。如果想让div2跟随div1移动，则要给div1添加了相对定位，才能让div2相对定位
#div1 { width:200px;height:200px;background:#CCC;position:relative;left:50px;}
#div2 {width:100px;height:100px;background:red;position:absolute;left:50px;top:50px;}
我修改了left值，让div1移动，再添加了position：relative 相对定位，让div2跟对div1移动。
到这里，position：relative相对定位就清晰了。
四、DOM节点
首尾节点：(有兼容性问题)
firstChild、firstElementChild
lastChild、lastElementChild
兄弟节点：（有兼容性问题）
nextSibling、nextElementSibling
previousSibling、previousElementSibling
兼容性问题代码如下
window.onload = function(){
var oUl = document.getElementById('ul1');
//IE6 7 8
//oUl.firstChild.style.background = 'red'; 此行代码在高版本运行不起来
//高级浏览器
oUl.firstElementChild.style.background = 'red'; //此行代码在较低级浏览器运行不起来
}
所谓兼容性问题。，如firstChild在高版本浏览器中，它获取的是ul后面到li之间的空白部分。而低版本却没有这个问题。
所以，这里解决兼容性问题办法就是用if判断（ajax的兼容性问题也是用if判断）
if（oUl.firstElementChild）{
oUl.firstElementChild.style.background = 'red';
}else{
oUl.firstChild.style.backGround = 'red';
}
五、操纵元素属性
DOM方式操作元素属性
获取：getAttribute（名称）
设置：setAttribute（名称，值）
删除：removeAttribute（名称）
用id选元素比较精准，可是当元素多的情况时候，一个一个去加就特别麻烦，所以推荐className属性操作
用className选择元素
如何用className选择元素
1、选出所有元素
2、通过className条件筛选
3、封装函数
var oUl = document.getElementById('ul1');
var aLi = oUl.getElmentsByTagName('li'); //取标签
for(var i = 0;i<aLi.length;i++){
if(aLi[i].className=='box'){
aLi[i].style.background='red'; //设置背景颜色
}
}
};
</script>
</head>
<body>
<ul id='ul1'>
<li class="box"></li> //li的class属性值为box
<li class="box"></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
</body>
通过className选择元素，那么接下来就是封装函数方便我们使用
function getByClass(oParent,sClass)
{
var aResult=[];
var aEle = oParent.getElementsByTagName('*');//采用通配符获取所有的标签
for( var i = 0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
} return aResult;//获取对应的数组后，在遍历长度，再做对应的修改 }
接下来就是应用这个封装函数
window.onload = function(){
var oUl = document.getElementById('ul1');
var aBox = getByClass(oUl,'box');
for(var i = 0;i<aBox.length;i++){
aBox[i].style.background='red';
}
};
六、创建、插入和删除元素
创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子：为ul插入li
插入元素
insertBefore(节点，原有节点) 在以有的元素前插入
例子：倒序插入li
删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li
//appendChild的应用
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
var oTxt = document.getElementById('txt1'); oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
//父级.appendChild(子节点);
oUl.appendChild(oLi);
}
};
</script>
</head>
<body>
<input id='txt1' type='text'>
<input id='btn1' type='button' value='创建li'>
</body>
//往前面插入
var oLi = document.createElement('li');
var aLi = oUl.getElementsByTagName('li');//前提是已经有li的存在
oLi.innerHTML=oTxt.value;
oUl.insertBefore(oLi,aLi[i]);
如果往前面插入li时，没有已存在的li，你说会怎样？ 所以，我们要加个判断，所以下面是改进代码
var oLi = document.createElment('li');
var aLi = oUl.getElmentsByTagName('li');
oLi.innerHTML = oTxt.value;
if(aLi.length>0){
oUl.insertBefore(oLi,aLi[i]);
}else{
oUl.appendChild(oLi);
}
下面是remove删除的例子
window.onload = function(){
var aA = document.getElementByTagName('a');
var oUl = document.getElementById('ul1');
for(var i=0;i<aA.length;i++){
aA[i].onclick = function(){
oUl.removeChild(this.parentNode);
}
}
};
</script>
</head>
<body>
<ul id='ul1'>
<li>dasda<a href="javascript:">删除</a></li>
<li>dasda<a href="javascript:">删除</a></li>
<li>dasda<a href="javascript:">删除</a></li>
七、文档碎片
文档碎片可以提高DOM操作性能（理论上）
文档碎片原理
document.createDocumentFragment()
window.onload=function(){
var oUl = document.getElementById('ul1');
var oFrag = document.createDocumentFragment();
for(var i =0;i<10000;i++){
var oLi = createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
}
在这个代码里面，其实加document.createDocumentFragment和不加效果差不多的，一般都是操作DOM几十条数据。一般很少1万条数据。在不同浏览器中，不加document.createDocumentFragment，IE浏览器会先描绘好后再加载，所以，会卡住几秒才会显示出来，其它浏览器就会好一点，比较快很多。在document.createDocumentFragment中，将创建好的li节点先保存在document.createDocumentFragment中，然后再将这个document.createDocumentFragment所保存的数据添加到oUl里。这样子性能会更快点。
八、DOM高级应用-表格添加。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <script>
window.onload = function(){
var oTa = document.getElementById('Tabe');
var oNa = document.getElementById('txt1');
var oAg = document.getElementById('txt2');
var oBtn= document.getElementById('btn');
var oid = oTa.tBodies[0].rows.length;
var aAa = oTa.getElementsByTagName('a'); btn.onclick = function(){ var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML = oid++;
oTr.appendChild(oTd); var oTd = document.createElement('td');
oTd.innerHTML = oNa.value;
oTr.appendChild(oTd); var oTd = document.createElement('td');
oTd.innerHTML = oAg.value;
oTr.appendChild(oTd); var oTd = document.createElement('td');
oTd.innerHTML = "<a href='javascript::'> 删除</a>";
oTr.appendChild(oTd); oTa.appendChild(oTr); }; }; </script>
<body>
<input type=text id='txt1'><br>
<input type=text id='txt2'><br>
<input type=button id='btn' value="提交"> <table border=1 id='Tabe'>
<thead><td>序号</td><td>姓名</td><td>年龄</td></thead>
<tbody> </tbody> </table> </body>
</html>
效果图
九、缓冲运动
<title>缓冲运动</title>
</head>
<style>
#div1{
width:100px; height:100px; background:red; position:absolute; left:0px;top:50px;}
#div2 { width:1px; height:300px; position:absolute; left:300px; top:0;
background:black;}
</style>
<script> function starMove(){
var oDiv = document.getElementById('div1');
setInterval(function(){
var speed = (300-oDiv.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
oDiv.style.left = oDiv.offsetLeft+speed+'px';
document.title = oDiv.offsetLeft+','+speed;
},30); } </script> <body>
<input type=button value='移动' onclick='starMove()'>
<div id='div1'></div>
<div id='div2'></div> </body>
</html>
效果：点击按钮，使left=0的div模块往右走，达到left=300位置停住，其过程减速过程慢慢减缓，其中用到了offsetLeft与style.left ，offsetLeft是 获取的是当前对象左侧距离父对象左侧的值。Math.ceil():向上取整，如9.5会取值10，Math.floor():向下取整，如9.5会取值9；
十、srollTop滚动
<style>
body { height:2000px;}
#div1{
height:100px;
width:150px;
background:red;
position:absolute;
right:0;
bottom:0;} </style> <script> window.onscroll = function(){
var oDiv = document.getElementById('div1');
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
startMove(parseInt(document.documentElement.clientHeight-oDiv.offsetHeight)+scrollTop);
//document.documentElement.clientHeight可视区域高度
//oDiv.offsetHeight Div偏离父级元素的偏移位置
//scrollTop 滚动条的高度
};
var timer = null;
function startMove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget-oDiv.offsetTop)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget==oDiv.offsetTop){
clearInterval(timer);
}else{
oDiv.style.top = oDiv.offsetTop+speed+'px';
} },30); } </script> <body height:"2000px"> <div id='div1'></div>
</body>
</html>
效果： 拉着滚动条，DIv模块随之一起滚动，保持绝对位置。 //当页面滚动条刚好在最顶端，即scrollTop值为 0 时
DOM+position:relative+缓冲运动的更多相关文章
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- js实现缓冲运动，和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
- 原生JavaScript运动功能系列（二）：缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
- javascript 缓冲运动demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理
看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...
随机推荐
- 使用jsoup轻松爬数据
刚刚学习爬虫,感觉使用jsoup爬虫挺容易的.记录一下自己爬取数据的过程. Jsoup介绍: Jsoup 是一个 Java 的开源HTML解析器,可直接解析某个URL地址.HTML文本内容.使用Jso ...
- 深入理解Java并发synchronized同步化的代码块不是this对象时的操作
本文仅仅是为了说明synchronized关键字同步的是对象不是方法,列子的确有失偏颇. 一.明确一点synchronized同步的是对象不是方法也不是代码块 我有关synchronized同步的是 ...
- leetcode 3.Longest Substring Without Repeating Charcters
在一个字符串中寻找出最长的无重复字符的子串的,在不断的后续检索中需要去掉前面一个重复的字符,那么就是需要记录之前所出现过的字符的,在这里需要利用hashmap来记录字符和其出现的位置之间的映射关系的, ...
- day05 判断敏感字符
1.判断一个字符是不是敏感字符: in 1.str v ="年龄多大了" if "大" in v: print("敏感") 2.list/t ...
- 学习笔记TF017:自然语言处理、RNN、LSTM
自然语言处理 (NLP)问题都是序列化的.前馈神经网络,在单次前馈中对到来数据处理,假定所有输入独立,模式丢失.循环神经网络(recurrent neural network,RNN)对时间显式建模神 ...
- 前后端如何保持长连接？---websocket
1. pc端的应用,一般会采用前端定时请求后台; 2. app定时去访问后台的话,对用户来说并不友好,会消耗大量的流量,移动端最好的方式就是后台主动向app推送信息; 3. H5提供了一种比较好的方式 ...
- 我发起并创立了一个 .Net 平台上的 Web 业务系统 基础库 开源项目 WebEasy
我 强调一点, 程序员 应该对 程序 有 控制感 . 过多的 控制反转 使 程序员 丧失了 对 程序 的 控制感 . 过多的 依赖注入 束缚了 程序员 的 创造力 . 过度复杂的 架构设计 束缚了 程 ...
- Written a lua threadpool
工作原理 由于lua只能单线程运行,该lib要求所有lua代码在单线程,而多线程部分只能为c代码 具体用法上要求多线程部分必须用c实现 相关模块 线程池 异步函数实现框架 Now only a sle ...
- Flask--(项目准备)--添加日志
日志:记录程序运行的状态,在manage.py同级目录下创建logs文件夹 定义日志文件: import logging from logging.handlers import RotatingFi ...
- *浅解嵌入式中的BootLoader
本文只作为本人学习过程中的记录及时不时的突发奇想偶记.鄙人菜鸟一只,文中如有错误或疏漏,若读者肯不吝赐教,在下感激零涕.文章一直不断更新中 一.何为Bootloader 在嵌入式系统中,Bootloa ...