JavaScript : DOM文档解析详解

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文档解析详解的更多相关文章

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...
Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
document文档流详解
html页面下载完默认会打开一个文档流document对象(调用document.open,此时浏览器标题左边会显示加载中图标),开始从上往下渲染内容,渲染完成调用document.close关闭渲染 ...
Java基础入门 - 三种注释及文档注释详解
类似C/C++,Java也支持单行和多行注释注释中的字符在编译时会被忽略注释通常为类.变量和方法的主要描述单行注释 // 注释内容多行注释 /* 注释内容 */ /* * 注释内容 */ 文档 ...
BRD——>MRD——>PRD，产品经理三大文档概念详解及前后逻辑
转自:https://blog.csdn.net/neikutaixiao/article/details/40819445 商业需求文档Business Requirement DocumentBR ...
SqlHelper 帮助文档及详解--项目初步搭建
微软SqlHelper类中文注释和使用方法相关链接: http://blog.csdn.net/itmaxin/article/details/7609566 SqlHelper.cs是N年前微软出 ...
Jsoup库解析DOM文档
DOM文档包括 HTML, XML等等下载: http://jsoup.org/download Jsoup 获取数据的方式 //html 文本, url, 本地html String html = ...
将XML解析成DOM文档
在支持html5的浏览其中,可以使用标准解析器DOMParser对象进行解析html或者xml等字符串 var data = '<div></div>'; var tmp = ...
JavaScript的文档对象模型DOM
小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

随机推荐

Html A标签中 href 和 onclick 同时使用的问题优先级别
我们在制作网页的时候用得最多的就是 A 标签超连接但有时候需要在 A 里同时用到 href 和 onclick属性下面我们先来分析一下 ,在不同的浏览器下有不同的效果 1 顺序 ie 6 : h ...
李洪强-C语言6-控制结构
C语言流程控制一.流程控制结构 (1)顺序结构:按书写顺序执行每一条语句. (2)选择结构:对给定的条件进行判断,根据判断结果决定执行哪一段代码. (3)循环结构:在给定条件成立的情况下,反复执行某 ...
Qt Creator Shortcuts 快捷键大全
编号快捷键功能 1 Esc 切换到代码编辑状态 2 F1 查看帮助(选中某一类或函数,按下F1,出现帮助文档) 3 F2 在光标选中对象的声明和定义之间切换(和Ctrl+鼠标左键一样的效果,选中某 ...
java第一节课
1.安装 2.编写java程序首先,新建一个文本文档:把后缀改成.java,然后起一个文件名,要是英文的,如:Hello. 然后,编辑,代码如下: class Hello { public stat ...
virt-XXX
尽管 virt-manager 是 libvirt 虚拟化 API 的一个首要用户,但有一个越来越庞大的工具生态系统在使用此接口进行虚拟化管理.virt-manager 包提供了一个便捷的 GUI,用 ...
【新产品发布】【GK101 10MHz任意波发生器】
简介: GK101 10MHz掌上任意波形发生器基于多项先进技术,在较小的体积上实现了普通台式仪器才具有的功能.仪器仅手掌大小,实现了80M采样率.10MHz最大频率.10Vpp最高幅度的输出. 仪器 ...
JDBC链接数据库版本三，使用C3P0，使用jar文件两个
JdbcUtil类: package com.xiaohui.jdbc.util; import java.sql.Connection; import java.sql.PreparedStatem ...
MySQL 数据库设计笔记与总结（1）需求分析
数据库设计的步骤 ① 需求分析 ② 逻辑设计使用 ER 图对数据库进行逻辑建模 ③ 物理设计 ④ 维护优化 a. 新的需求进行建表 b. 索引优化 c. 大表拆分 [需求分析] ① 了解系统中所要存 ...
树莓派系统安装、HDMI显示
树莓派上可以安装多种操作系统,我们采用的是官方的基于debian的raspbian.系统安装方式见安装完系统由于我使用的是7寸的HDMI屏,装完系统如果配置不该的话会导致右边有一部分无法显示,所以在 ...
PHP学习(四)---PHP与数据库MySql
主要有以下的内容: 1.怎么连接数据库 2.怎么操作数据库 (1)怎么执行sql语言 (2)怎么处理返回的结果集方法一:面向过程(已经过时,只是了解) 假设: $username=your_name ...

JavaScript : DOM文档解析详解

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

随机推荐

热门专题