javascript DOM小结

一：定义

dom：文档对象模型。

dom是针对HTML和XML文档的一个API。dom描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面的某一部分。

1：childNodes（返回当前节点的子节点列表）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom1</title>

    <style>

        li{

            height: 30px;

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <ul id="uls">

        <li></li>

        <li></li>

    </ul>

</body>

<script>

        var uls = document.getElementsByTagName("ul")[0];

    //chrome:5 ,ie>=9 :5; ie<=8 :2

    alert(uls.childNodes.length);

</script>

</html>

chrome弹出5（），为什么是5？如图：

3个文本节点（红，蓝，黑），2个元素节点（方框圈起来的）。ie5-8弹出2，说明其中节点并不包含文本节点。

如果如下写法会报错（文本节点不能设置background）：

    for(var i = 0; i <= uls.childNodes.length; i++){

       uls.childNodes[i].style.background = "red";

    }

兼容写法：当节点为元素节点的时候设置其背景色

　　for(var i = 0 ; i <= uls.childNodes.length ; i++){

        //nodeType  -->1元素节点

        if(uls.childNodes[i].nodeType == 1){

            uls.childNodes[i].style.background = "red";

        }

    }

2：children（该属性返回节点的子元素--不包含文本节点）

         alert(uls.children.length);                                         //chrome和ie 都为2

         for(var i = 0 ; i <= uls.children.length ; i++){

        uls.children[i].style.background = "red";

    }

注意：不论是children、childNodes，子节点只算第一层的，子节点中的元素不算在其中（那个是孙子节点）。

3：parentNode（返回指定节点的父节点）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom1</title>

    <style>

        li{

            height: 30px;

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <ul id="uls">

        <li></li>

        <li></li>

    </ul>

</body>

<script>

    var uls = document.getElementById("uls");

    alert(uls.parentNode);

</script>

</html>

4：offsetParent（返回最近的祖先定位元素）

定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom1</title>

    <style>

        #wrapper{

            position: relative;

            width: 200px;

            height: 200px;

        }

        #inner{

            position: absolute;

        }

    </style>

</head>

<body>

    <div id="wrapper">

        <div id="noPosition">

            <div id="inner"></div>

        </div>

    </div>

</body>

<script>

    var sonNode = document.getElementById("inner");

    alert(sonNode.offsetParent.id);

</script>

</html>

如果容器元素未设置css定位，则返回body或html

5：firstChild (firstElementChild)

兼容问题：

　　ie6~8： firstChild

　　其他浏览器： firstElementChild

兼容写法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom1</title>

</head>

<body>

    <ul id="uls">

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

<script>

    var uls = document.getElementById("uls");

    if(uls.firstElementChild){

        uls.firstElementChild.style.background = "red";

    }else{

        uls.firstChild.style.background = "red";

    }

</script>

</html>

6：lastChild (lastElementChild)

兼容问题：

　　ie6~8： lastChild

　　其他浏览器： lastElementChild

用法同firstChild。

7：nextSibling（nextElementSibling）

兼容问题：

　　ie6~8： nextSibling

　　其他浏览器： nextElementSibling

用法同上

8：previousSibling（previousElementSibling）

兼容问题：

　　ie6~8： previousSibling

　　其他浏览器： previousElementSibling

用法同上

9：getAttribute，setAttribute，removeAttribute

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom</title>

</head>

<body>

    <input type="text" id="btn1" />

    <input type="button" value="按钮" id="btn2" name="2" />

</body>

<script>

    // 用dom的方式操纵元素属性

    var btn1 = document.getElementById("btn1");

    var btn2 = document.getElementById("btn2");

    btn2.onclick = function(){

    // btn1.value = "1234";

        // btn1["value"] = "1234"

        var btn2Value = btn2.getAttribute('value');

        alert(btn2Value);

        btn1.setAttribute("value",btn2Value);

        btn2.removeAttribute("value");

    }

    // 获取：getAttribute(属性名称)

       // 设置：setAttribute(属性名称，值)

       // 删除：removeAttribute(属性名称)

</script>

</html>

10：createElement（创建元素节点）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul id="uls">

    </ul>

    <input type="button" value="创建li" />

</body>

<script>

    var uls = document.getElementsByTagName("ul")[0];

    var btns = document.getElementsByTagName("input")[0];

    btns.onclick = function(){

        var lis = document.createElement("li");

        uls.appendChild(lis);

    // 父级.appendChild(创建的元素);

    }

</script>

</html>

11：createTextNode（创建文本节点）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="main">

</div>

</body>

<script>

    var main = document.getElementById("main");

    var textNode = document.createTextNode("<h1>wefwedf</h1>");

    main.appendChild(textNode);

</script>

</html>

结果：

12：appendChild（指定元素节点的最后一个子节点之后添加节点）

父级.appendChild(子节点)。

用法见上

13：insertBefore（在已有的子节点前插入一个新的子节点）

父级.insertBefore(子节点,在谁之前)。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="text" />

    <input type="button" value="插入元素" />

    <ul>

    </ul>

</body>

<script>

    var txt = document.getElementsByTagName("input")[0];

    var btn = document.getElementsByTagName("input")[1];

    var uls = document.getElementsByTagName("ul")[0];

    // btn.onclick = function(){

    // 　　var lis = document.createElement("li");

    // 　　lis.innerHTML = txt.value;

    // 　　uls.appendChild(lis);

    // }

    // 父级.appendChild(子节点);

    // 父级.insertBefore(子节点,在谁之前)；

    btn.onclick = function(){

        var lic = document.createElement("li");

        var lis = document.getElementsByTagName("li");

        lic.innerHTML = txt.value;

        uls.insertBefore(lic,lis[0]);// ie下会报错，因为初始时没有li。

    }

</script>

</html>

解决上面的栗子初始化时ie8及以下报错，兼容写法：

   btn.onclick = function(){

        var lic = document.createElement("li");

        var lis = document.getElementsByTagName("li");

        lic.innerHTML = txt.value;

        if(lis.length == 0){

            uls.appendChild(lic);

        }else{

            uls.insertBefore(lic,lis[0]);

        }

    }

14：removeChild（删除父元素中的子节点）

父级.removeChild(子节点)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom9</title>

    <style>

        span{

            color: red;

        }

    </style>

</head>

<body>

    <ul id="uls">

        <li>jdjdjdjd<span>删除</span></li>

        <li>jdsdcsd<span>删除</span></li>

        <li>jdcsdsddjd<span>删除</span></li>

        <li>12123<span>删除</span></li>

        <li>343434jdjd<span>删除</span></li>

    </ul>

</body>

<script>

    var uls = document.getElementById("uls");

    var spans = document.getElementsByTagName("span");

    for(var i = 0; i<= spans.length; i++){

        spans[i].onclick = function(){

            uls.removeChild(this.parentNode);

        }

    }

    // removeChild 删除父元素中的子节点。

</script>

</html>

15：cloneNode（复制当前节点或复制当前节点及其子节点）

复制的节点.cloneNode(false) -->复制当前节点
复制的节点.cloneNode(true) -->复制当前节点及其子节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

            #box{

                width: 100px;

                height: 100px;

                background: red;

            　　　 }

            #div1{

                width: 200px;

                height: 200px;

                border: 5px solid #000;

           　　　 }

        </style>

</head>

<body>

    <div id="box">

        这个是box

    </div>

    <div id="div1">

        这个是div1

    </div>

    <input type="button" value="复制" id="btn" />

</body>

<script>

        var btn = document.getElementById("btn");

    var box = document.getElementById("box");

    var div1 = document.getElementById("div1");

    btn.onclick = function(){

        var clonbox = box.cloneNode(false);

        div1.appendChild(clonbox);

        // var clonbox1 = box.cloneNode(true);

               // div1.appendChild(clonbox1);

    }

16：replaceChild（替换当前父节点中的指定子节点）

父节点.replaceChild(新插入的节点，要替换的节点)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>替换节点</title>

</head>

<body>

    <div id="main">

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>

<script>

    var main = document.getElementById("main");

    var spans = document.createElement("span");

    // replaceChild()方法替换节点

    // 参数一：新插入的节点；

    // 参数二：要替换的节点；

    // 父节点.replaceChild(新插入的节点，要替换的节点)

    main.replaceChild(spans,main.children[1])

</script>

</html>

先总结到这，后边再补充。。。

javascript DOM小结的更多相关文章

javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

随机推荐

linux下常用网络操作汇总
首先说明下RHEL6下设置IP地址的确和RHEL5下有几点是不同的. 我装完RHEL6中默认选择的是DHCP自动获取方式: [root@localhost ~]# vi /etc/sysconfig/ ...
android工程混淆和反编译
一.工程文件的混淆混淆文件下载:http://download.csdn.net/detail/lxq_xsyu/6328751 1.在根目录下添加progard.cfg文件 2.打开project ...
iconv
iconv -f 源字符集 -t 目标字符集文件名 iconv -f UTF-8 -t GBK success.msg [root@perass ~]# cat success.msg | t ...
网络流相关（拓扑）CodeForces 269C：Flawed Flow
Emuskald considers himself a master of flow algorithms. Now he has completed his most ingenious prog ...
C#调用Web Service时的身份验证
原理:webservice所在的系统中,在系统域中建立用于登录的软件的用户和密码,软件登录时将用户名.密码和登录的本机的域的名字通过webService的NetworkCredential传递到web ...
VGA IP核的制作
今天看了本<系统晶片设计-使用NIOS>这本书,看到VGA IP核的设计不错,特移植到Cyclone III上来,试验一下效果. 顶层代码:binary_VGA.v module bina ...
ubuntu下使用ngrok外网映射
好久之前想搞明白这个事情,可是就是不知道这个词叫外网映射,所以也一直不知怎么做,在慕课网看用java开发微信公众号的时候教程里提到了外网映射,查了一些资料终于把本地给映射到外网了,直接变成了80端口, ...
Ado Recordset.open
Recordset.open Recordset 对象的 Open 方法允许用户向数据库发出请求,通过是运行一个 SQL命令.启动一个指定的数据表或调用一个指定的 Stored Procedure ...
CPP变量参数别名
1,变量起"绰号"的操作称为引用(reference),"绰号"称为引用名,申明引用的语法格式; 变量数据类型 &引用名 = 已申明的变量名; 和C中的 ...
去除 Visual Studio 中臃肿的 ipch 和 sdf 文件
使用VS2010建立C++解决方案时,会生成SolutionName.sdf和一个叫做ipch的文件夹,这两个文件再加上*.pch等文件使得工程变得非常的庞大,一个简单的程序都会占用几十M的硬盘容量, ...

javascript DOM小结

一：定义

javascript DOM小结的更多相关文章

随机推荐

热门专题