JavaScript DOM  文档解析

1、节点（node）：来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合

　　<p title=“a gentle reminder”> Don’t forget to buy this stuff.</p>

　　节点及其类型

　　元素节点：

　　属性节点：元素的属性，可以直接通过属性的方式来操作

　　文本节点：元素节点的子节点，其内容通常为文本

2、Node接口的特性和方法

现在给出一个演示的HTML文件：

html

<!doctype html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>DOM文档解析</title>

    <script type="text/javascript">

        window.onload=function() {

            进行下面的事件处理.....

        }

    </script>

</head>

<body>

    <p id="ele">兴趣爱好：</p>

    <ul id ="favorite">

        <li id="movie">电影</li>

        <li id="music">音乐</li>

    </ul>

    <p id="ele">教学科目：</p>

    <ul id="education">

        <li id="subject" name="subject">语文</li>

        <li id="subject" name="subject">数学</li>

        <li id="subject" name="subject">英语</li>

    </ul>

    <br>

    文本框:<input type="text" id="inputText" name="inputText" value="China">

</body>

</html>

3、获取元素节点

　　1) document.getElementById(‘Id’)：根据id的属性获取对应的单个节点

var eleNode = document.getElementById("textInput");

alert(eleNode.value); //china

　　2) document.all(‘id’)：根据id的属性获取对应的节点集合

var eleNode = document.all("ele");

alert(eleNode.length); //

　　3) document.getElementsByTagName(‘tagName’)：根据标签名称获取指定节点集合

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

alert(eleNode.length);  //5

　　4) document.getElementsByName(‘name’)：根据节点的name属性获取符合的节点集合

var eleNode = document.getElementsByName("subject");

alert(eleNode.length); //

4、读写属性节点

1) 可以直接通过Node.属性这样的方式来获取和设置属性节点的值

var eleNode = document.getElementById("textInput"); //元素节点

alert(eleNode.value); //china

eleNode.value = "America"; //重新设置值

alert(eleNode.value); //America

2) 通过元素节点的getAttributeNode(‘属性’)方法来获取属性节点，然后再通过nodeValue来读写属性值

var eleNode = document.getElementById("textInput");//元素节点

var paraNode = eleNode.getAttributeNode("value");  //属性节点

alert(paraNode.nodeValue); //china

paraNode.nodeValue = "America";//重新设置值

alert(paraNode.nodeValue); //America

5、获取元素节点的子节点（只有属性节点才有子节点）

1) childNodes 属性获取全部的子节点，但该方法不实用，因为如果要获取指定的节点的指定子节点的集合，可以直接调用元素节点的getElementsTagName()方法来获取。　　

var eleNode = document.getElementById("favorite");

var childNodes = eleNode.childNodes;

alert(childNodes.length); //5，该方法不实用

var eleNode = document.getElementById("favorite");

var childNodes = eleNode.getElementsByTagName("li");

alert(childNodes.length);//2 ,方法很实用

2）firstChild  属性获取第一个子节点

var eleNode = document.getElementById("favorite");

alert(eleNode.firstChild);//[object Text] ,方法很实用

3）lastChild   属性获取最后一个子节点

var eleNode = document.getElementById("favorite");

alert(eleNode.lastChild); //[object Text] ,方法很实用

6、读写文本节点：获取文本节点，文本节点一定是元素节点的子节点

1）步骤：元素节点——>获取元素节点的子节点

//1.获取文本节点所在的元素节点

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

//2.获取元素节点的子节点，即文本节点

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

    var liTextNodes = liNodes[i].childNodes;

    alert(liTextNodes.length);// 1 1 1 1 1

}

2）若元素节点只有文本节点一个子节点，例如<li id="movie">电影</li>

可以先获取到指定的元素节点eleNode，

再利用eleNode.firstChild.nodeValue的方法来读写文本节点的值

 //1.获取文本节点所在的元素节点

var movieNode = document.getElementById("movie");

//2.通过firstChild定义到文本节点

var movieTextNode = movieNode.firstChild;

alert(movieTextNode); //[object text]

//3.通过操作文本节点的nodeValue属性读写文本节点的属性值

alert(movieTextNode.nodeValue); //电影

movieTextNode.nodeValue = "爬山";//重新设置值

alert(movieTextNode.nodeValue); //爬山

7、节点的属性

1）nodeName：代表当前节点的名字，只读属性。

2）nodeType：返回一个整数，这个数值代表者给定节点的类型，只读属性

3）nodeValue：返回给定节点的当前值（字符串）。可读可写属性

　　　　由于节点可以分为元素节点，属性节点和文本节点，而这些节点又有三个非常有用的属性，nodeName属性和 nodeType属性是只读，而nodeValue属性是可以读写的：

元素节点：

var pNode = document.getElementById("ele");

alert(pNode.nodeType);  // 元素节点：1

alert(pNode.nodeName);  // 元素节点名：p

alert(pNode.nodeValue); // 元素节点没有nodeValue值：null

属性节点：

var nameAttrNode = document.getElementById("inputText").getAttributeNode("name");

alert(nameAttrNode.nodeType);  // 属性节点：2

alert(nameAttrNode.nodeName);  // 属性节点名：name

alert(nameAttrNode.nodeValue); // 属性节点的nodeValue就是属性值本身: inputText

文本节点：    　　

musicNode = document.getElementById("music");

musicTextNode = musicNode.firstChild;

alert(musicTextNode.nodeType);  // 文本节点：3

alert(musicTextNode.nodeName);  // 文本节点名：#text

alert(musicTextNode.nodeValue); // 文本节点值：音乐

8、创建一个元素节点

　　　1)createElement():按照给定的标签名创建一个新的元素节点，方法只有一个参数.

　　　被创建的元素节点的名字，是一个字符串。

　　　方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的nodeType属性值是1.

　　　　　**新元素不会自动添加到文档里，它只是一个存在于JavaScript上下文的对象.　　

　//新创建一个元素节点，并把该节点添加到文档中指定节点的子节点，并作为指定节点的最后一个子节点

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

var favoriteNode = document.getElementById("favorite");

favoriteNode.appendChild(liNode);  //多了一个不带文本节点的子节点 

9、创建一个文本节点

　　　　1) createTextNode():创建一个包含着给定文本的新文本节点。

　　　　这个方法的返回值是一个指向新节点的引用指针。

　　　　方法只有一个参数，新建文本节点所包含的文本字符串。新元素节点不会自动添加到文档里。

//新创建一个元素节点，并把该节点添加到文档中指定节点的子节点，并作为指定节点的最后一个子节点

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

var favoriteNode = document.getElementById("favorite");

favoriteNode.appendChild(liNode);

//新建一个"读书"文本节点,并把它添加到元素节点中

var readTextNode = document.createTextNode("读书");

liNode.appendChild(readTextNode); //多了一个”读书”文本节点的子节点

10、为元素节点添加子节点

　　　　1) appendChild(): var reference = element.appendChild(newChild):

　　　　　　给定子节点newChild将成为给定元素节点element的最后一个子节点。

　　　　　　方法的返回值是一个指向新增子节点的引用指针。

　　　　　　例如上面的：　

favoriteNode.appendChild(liNode);

liNode.appendChild(readTextNode);

11、节点的替换

　　　　1) replaceChild()：把一个给定父元素里的一个子节点替换成另外一个子节点.

　　　　　　var refrence = element.replaceChild(newChild,oldChild);

　　　　　　该节点处了替换功能以外还有移动功能；

//取出元素节点

var ulNode = document.getElementById("education");

var movieNode = document.getElementById("movie");

var liNodes = document.all("subject");

//全部替换

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

    ulNode.replaceChild(movieNode,liNodes[i]);  //科目子节点被替换成了”电影”这个节点,同时位置也移动了

}

　　　2) 该方法只能完成单向替换，若需要使用双向替换，需要自定义函数。　

//实现movie和music节点的互换

var ulNode = document.getElementById("favorite");

//获取movie节点和music节点

var movieNode = document.getElementById("movie");

var musciNode = document.getElementById("music");

//克隆movieNode

var movieNode2 = movieNode.cloneNode(true); //true:表示连它的子节点都克隆

//互换一下位置

ulNode.replaceChild(movieNode2,musciNode);

ulNode.replaceChild(musciNode,movieNode); //此时，“电影”和“音乐”就互换了

12、删除节点

　　　　1) removeChild()：从一个给定元素里删除一个子节点

　　　　　var reference = element.removeChild(node)

　　　　　返回值是一个指向已被删除的子节点的引用指针，某个节点被removeChild()方法删除时，这个节点所包含的所有子节点将同时被删除。如果想删除某一个节点，但不知道他的父节点是哪一个，parentNode属性可以帮忙。　

//获取id为"music"的子节点musicNode

var musicNode = document.getElementById("music");

//获取父节点ulNode

//var ulNode = document.getElementById("favorite");

var ulNode = musicNode.parentNode;

//删除musicNode子节点

ulNode.removeChild(musicNode); //此时“音乐”这个节点就消失了

13、插入节点

　　　　1）insertBefore()：把一个给定节点插入到一个给定元素节点的给定子节点前面

　　　　　　var reference = element.insertBefore(newNode,targetNode)的前面。

　　　　　　节点targetNode必须是element元素的一个节点。　

//取出musicNode

var musicNode = document.getElementById("music");

//取出movieNode

var movieNode = document.getElementById("movie");

//将musicNode插入到movieNode前面

musicNode.parentNode.insertBefore(musicNode,movieNode); //此时，“音乐”节点就插入到了“电影”节点前面

2) 自定义insertAfter(newNode,refNode)方法

　　思路：<1>测试refNode是否为其父节点的一个子节点

　　　　　<2>如是：直接把newNode插入到refNode父节点的最后一个子节点,使用appendChild()方法即可

　　　　　<3>如不是：获取一个refNode的下一个兄弟节点，然后插入到其下一个兄弟节点的前面

window.onload=function() {

    //取出musicNode

    var musicNode = document.getElementById("music");

    //取出movieNode

    var movieNode = document.getElementById("movie");

    //将movieNode插入到musicNode后面

    insertAfter(movieNode,musicNode); //此时，“电影”节点就插入到了“音乐”节点后面

}

function insertAfter(newNode,refNode) {

    refNode.parentNode.appendChild(newNode);

}

总结：

一、获取元素节点经常使用的方法：

(1)使用getElementById()方法通过id属性获取对应的单个元素节点。推荐使用。

(2)使用getElementByTagName()方法根据标签获取指定元素节点名字的数组，数组对象length属性可以获取数组

的长度。推荐使用。

(3)使用getElementsByName()方法根据name属性获取对应的表单元素节点。这里要注意是符合的表单元素中的

name属性的值。获取表单元素时推荐使用。

二、获取元素节点的子节点(只有元素节点才有子节点)我们通常使用

(1)首先是先利用获取元素节点的方法获取到元素节点，再使用childNodes属性获取全部的子节点对象数组列表，

注意不兼容性和空白文本节点。不推荐使用。

(2)首先是先利用获取元素节点的方法获取到元素节点，再使用firstChild属性与lastChild属性获取元素节点的第一

个子节点和最后一个子节点。这里也要注意空白文本节点。推荐使用。

(3)首先利用获取元素节点的方法获取元素节点，再利用children属性获取所有它的所有有效子节点对象数组列

表。推荐使用。

(4)首先使用获取元素节点的方法获取到指定的元素节点，再使用getElemensByTagName()方法获取所有的子元

素节点对象数组列表。推荐使用。

三、获取属性节点

(1)由于属性节点时某一指定元素节点的属性，可以通过先使用getElementById()方法通过id属性获取对应的单个

元素节点再利用“元素节点.属性”这样的方式来获取和设置属性节点的值。推荐使用。

(2)先利用获取元素节点的方法获取到元素节点，再使用Attribute属性返回该节点的属性节点集合。但是要注意浏

览器的兼容性。这种不推荐使用。

四、获取文本节点(文本节点时元素节点的子节点)

(1)首先也是利用获取元素节点的方法获取到元素节点，再利用元素节点的属性innerHTML属性得到文本节点中的

文本内容。推荐使用。

(2)如果指定的元素节点中只有一个子节点，也就是该子节点是文本节点，可以先获取文本节点所在的元素节点，

再利用firstChild属性定位到文本节点，最后通过文本节点的nodeValue属性获取文本节点中的文本内容。推荐使用。

五、获取body元素节点

(1)使用document.getElemensByTagName("body")[0]获取body元素节点。

(2)使用document.body获取body元素节点。推荐使用。

JavaScript : DOM文档解析详解的更多相关文章

  1. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  2. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  3. document文档流详解

    html页面下载完默认会打开一个文档流document对象(调用document.open,此时浏览器标题左边会显示加载中图标),开始从上往下渲染内容,渲染完成调用document.close关闭渲染 ...

  4. Java基础入门 - 三种注释及文档注释详解

    类似C/C++,Java也支持单行和多行注释 注释中的字符在编译时会被忽略 注释通常为类.变量和方法的主要描述 单行注释 // 注释内容 多行注释 /* 注释内容 */ /* * 注释内容 */ 文档 ...

  5. BRD——>MRD——>PRD，产品经理三大文档概念详解及前后逻辑

    转自:https://blog.csdn.net/neikutaixiao/article/details/40819445 商业需求文档Business Requirement DocumentBR ...

  6. SqlHelper 帮助文档及详解--项目初步搭建

    微软SqlHelper类中文注释和使用方法 相关链接: http://blog.csdn.net/itmaxin/article/details/7609566 SqlHelper.cs是N年前微软出 ...

  7. Jsoup库 解析DOM文档

    DOM文档包括 HTML, XML等等 下载: http://jsoup.org/download Jsoup 获取数据的方式 //html 文本, url, 本地html String html = ...

  8. 将XML解析成DOM文档

    在支持html5的浏览其中,可以使用标准解析器DOMParser对象进行解析html或者xml等字符串 var data = '<div></div>'; var tmp = ...

  9. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

随机推荐

  1. eWebeditor编辑器上传图片的设置程序

    protected void Button1_Click(object sender, EventArgs e) { if (this.uploadfile.PostedFile.FileName.E ...

  2. Sqlserver 存储过程中结合事务的代码

    Sqlserver 存储过程中结合事务的代码  --方式一 if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[ ...

  3. 【MVC框架整合】之 SpringMVC3.2.0+MyBatis3.1.1+Spring3.2.0

    1.先整合spring和Mybatis 第一步基本上都是一样加入jar包 创建测试目录 添加junit jar包和log4j配置文件 Log4j的配置文件基本上都是不会变的复制过来就行了 现在就和Hi ...

  4. Struts2_ValueStack,OGNL详解

    一.ValueStack    1.ValueStack是一个接口,在struts2中使用OGNL(Object-Graph Navigation Language)表达式实际上是使用实现了Value ...

  5. 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js

    在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...

  6. C#生成日期流水账号

    生成类似 LS14120002 private String GenNewOrder() { String newOrder; var orders = LYOrder.Items; String l ...

  7. ajax的同步和异步问题 (转)

    async默认的设置值为true,这种情况为异步方式,当ajax发送请求后,在等待server端返回的数据的过程中,程序会继续执行ajax块后面的代码,直到服务器返回正确的结果才会去执行success ...

  8. Hrbustoj 1429 二分+计算几何

    http://www.bubuko.com/infodetail-1121744.html 在这个上面学习了方法 如果要判断巨量的点 就应该使用二分法 思路是先从a[1] a[n] a[2]来判断是否 ...

  9. php常用Stream函数集介绍

    php常用Stream函数集介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-06-24   本篇文章是对php中的常用Stream函数集进行了详细的分析介绍,需要的朋友参考下     ...

  10. 页面静态化3 --- 伪静态技术之Apache的rewrite机制

      Apache的rewrite机制: 意思就是,你发送的地址,比如:http://localhost/news-id67.html会被Apache改写成http://localhost/news.p ...