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”> ...

随机推荐

bzoj2743
其实和bzoj1878类似只不过要求的是区间内数量多于1个的数字种数其实还是按照bzoj1878做只不过我们是把每一种数字下一个出现的位置+1,并把这个位置置为0 ..] of longint; ma ...
Google Map API 学习五
今天其实收货很大的 1.InfoWindow google.maps.InfoWindow class An overlay that looks like a bubble and is often ...
Unity3d 使用DX11的曲面细分
Unity3d surface Shaderswith DX11 Tessellation Unity3d surface shader 在DX11上的曲面细分 I write this articl ...
jQuery 遍历
.add() add() 方法将元素添加到匹配元素的集合中 .add(selector)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式. .add(elements)//添加到匹配元素 ...
ACM1228_STL的应用
#include<iostream> #include<string> #include<map> using namespace std; map<stri ...
linux trap
Java GC专家系列4：Apache的MaxClients设置及其对Tomcat Full GC的影响
本文是GC专家系列中的第四篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.所以,你应该已经了解了JDK 7中的5种GC类型,以及每种GC ...
20个 Unix/Linux 命令技巧
让我们用这些Unix/Linux命令技巧开启新的一年,提高在终端下的生产力.我已经找了很久了,现在就与你们分享. 删除一个大文件我在生产服务器上有一个很大的200GB的日志文件需要删除.我的rm和l ...
[转载]opencv MSER
最大稳定极值区域(MSER-Maximally Stable Extremal Regions)可以用于图像的斑点区域检测.该算法最早是由Matas等人于2002年提出,它是基于分水岭的概念. MSE ...
svn操作
1.已经被svn管理的文件的复制.删除.重命名都要通过svn的命令来操作(在资源管理器中通过鼠标右键来完成)(复制粘贴可以通过右键按下移动来实现) 2.没有被svn管理的文件(没有被上传过的文件,没有 ...

javascript DOM小结

一：定义

javascript DOM小结的更多相关文章

随机推荐

热门专题