一、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+缓冲运动的更多相关文章

  1. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  2. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  3. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  4. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  5. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

  6. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  7. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  8. javascript 缓冲运动demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

    看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...

随机推荐

  1. vscode下调试运行c++

    vscode是微软的最新产品,轻量易用,最初是前端用的多,尤其是typescript,因为vscode的作者也是typescipt作者.一般c++的IDE很多,比如visual studio等,但是都 ...

  2. Spring中的@Bean注解、@Configuration注解、@Value

    1.首先是注册bean类:@Component.@Responsitory.@Controller.@Service.Configuration这些注解是把要实例化的对象装化成一个bean,放到Ioc ...

  3. 使用Sublime Text 3进行Markdown 编辑+实时预览

    这种做法可能会对你的磁盘IO造成一小部分性能负担,但负面影响足以忽略. 另外,由于这种频率的读写会被磁盘缓存接管,不必担心磁盘寿命的影响. 对于刚安装好的Sublime Text,我们需要安装一个软件 ...

  4. PHP之缓存雪崩，及解决方法（转）

    一.什么是缓存雪崩缓存雪崩就是指缓存由于某些原因(比如 宕机.cache服务挂了或者不响应)整体crash掉了,导致大量请求到达后端数据库,从而导致数据库崩溃,整个系统崩溃,发生灾难. 下面的就是一个 ...

  5. linux4.15.1编译init/mounts报错

    AR init/mounts.o arm-linux-ar: illegal option -- T Usage: arm-linux-ar [emulation options] [-]{dmpqr ...

  6. mvc项目用log4net 记录错误日志

    1.  首先下载lognet 下载地址 http://logging.apache.org/log4net/download_log4net.cgi 2.找到bin文件中的net文件夹  之后看你电脑 ...

  7. 三、tcp、ip协议详细

    1. 什么是 TCP/IP? TCP/IP 是一类协议系统,它是用于网络通信的一套协议集合． 传统上来说 TCP/IP 被认为是一个四层协议 1) 网络接口层: 主要是指物理层次的一些接口,比如电缆等 ...

  8. Javascript 香蕉分段吃（数组分隔）

    Javascript 香蕉分段吃(数组分隔) function chunk(arr, size) { var newArr =[]; for(var i = 0; i < arr.length; ...

  9. Linux内核分析第三次作业

    实验:mykernel时间片轮转多道程序内核 进入实验楼实验,在终端中分别输入以下命令 cd LinuxKernel/linux-3.9.4 rm -rf mykernel patch -p1 < ...

  10. 3.2 MathType插入竖省略号

    法1:鼠标单击位于上方菜单栏下面的空格和椭圆模版,然后在下拉模版下选择垂直省略号,如下图所示. 按照上面的操作选择垂直省略号模版后,这样在下面的编辑区域就会打出该符号了. 法2:在插入符号下查找 如果 ...