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

随机推荐

Velocity
vm模板设计原则让前端来写后端的vm模板,并且前端不需要搭建各种繁杂的后端环境,前后端以 .vm 为沟通桥梁,另外模板的数据源可以在项目开始前前后端约定之后生成JSON文件,从而使两个角色并行开发 ...
Defining as a "long" or "int" type throws an error on startup
solr启动时候,报如下异常: [java] view plaincopy SEVERE: org.apache.solr.common.SolrException at org.a ...
动态规划（树形DP）：HDU 5834 Magic boy Bi Luo with his excited tree
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8UAAAJbCAIAAABCS6G8AAAgAElEQVR4nOy9fXQcxZ0uXH/hc8i5N+
Linux学习笔记28——消息队列
一关于消息队列消息队列提供了一种从一个进程向另一个进程发送一个数据块的方法,而且,每个数据块都被认为含有一个类型,接收进程可以独立地接受含有不同类型值的数据块.可以通过发送消息来几乎完全避免命名管 ...
C++中的虚函数总结
一.什么是虚函数.纯虚函数.抽象基类虚函数:在某基类中声明为 virtual 并在一个或多个派生类中被重新定义的成员函数. 纯虚函数:是一种特殊的虚函数,使用virtual关键字,并且在其后面加上 ...
用xib文件，配置UITableViewCell
http://www.cnblogs.com/lixingle/p/3287499.html 在运行时候,如果出现“this class is not key value coding-complia ...
ReactiveCocoa Tutorial
ReactiveCocoa Tutorial – The Definitive Introduction: Part 1/2 ReactiveCocoa教程——明确的介绍:第一部分(共两部分) As ...
Web服务器性能/压力测试工具http_load、webbench、ab、Siege使用教程 - VPS侦探
Web服务器性能/压力测试工具http_load.webbench.ab.Siege使用教程 - VPS侦探 http://soft.vpser.net/test/http_load/http_loa ...
Self-numbers 2 - SGU 108
翻译:引自 http://www.cnblogs.com/yylogo/archive/2011/06/09/SGU-108.html 在1949年印度的数学假D.R. Kaprekar发现了一种叫做 ...
Android实现弹出输入法时，顶部固定，中间部分上移的效果
前言最近做项目时碰到一个问题,在意见反馈里面,提交按钮写到顶部,当用户输入反馈意见或者邮箱手机号时,弹出的输入法会上移整个页面,导致提交按钮显示不了. 很明显,这样的界面是非常不友好的,找了一些资料 ...

javascript DOM小结

一：定义

javascript DOM小结的更多相关文章

随机推荐

热门专题