首页  思维导图  详情

JavaScript Node节点类型

2019-04-28 13:54:42   1  举报





AI智能生成

JavaScript 常见node节点类型

作者其他创作

大纲/内容

自有属性方法

1、节点属性

nodeName

nodeName 的值是元素的标签名；

nodeType

Node.ELEMENT_NODE(1)；

Node.ATTRIBUTE_NODE(2)；

Node.TEXT_NODE(3)；

Node.CDATA_SECTION_NODE(4)；

Node.ENTITY_REFERENCE_NODE(5)；

Node.ENTITY_NODE(6)；

Node.PROCESSING_INSTRUCTION_NODE(7)；

Node.COMMENT_NODE(8)；

Node.DOCUMENT_NODE(9)；

Node.DOCUMENT_TYPE_NODE(10)；

Node.DOCUMENT_FRAGMENT_NODE(11)；

Node.NOTATION_NODE(12)。

nodeValue

对于元素节点， nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null；

2、节点关系

childNodes

返回NodeList 对象；

parentNode

指向文档树中的父节点；

previousSibling

上一个节点；

nextSibling

下一个节点；

firstChild

第一个子节点；

lastChild

最后一个子节点；

hasChildNodes()

节点包含一或多个子节点的情况下返回 true；

ownerDocument

指向表示整个文档的文档节点；

3、节点操作

appendChild()

用于向 childNodes 列表的末尾添加一个节点；

返回新增的节点

insertBefore(newNode，target)

两个参数：要插入的节点和作为参照的节点；

replaceChild(newNode，target)

两个参数是：要插入的节点和要替换的节点；

removeChild()

一个参数，即要移除的节点；

返回被移除的节点

4、其他方法

cloneNode()

cloneNode()方法接受一个布尔值参数，表示是否执行深复制；

在复制之前最好先移除事件处理程序。

normalize()

将相邻的文本节点合并为一个文本节点。

继承自Node

Document类型

说明

document 对象是 HTMLDocument（继承
自 Document 类型）的一个实例，表示整个 HTML 页面。而且， document 对象是 window 对象的一个
属性，因此可以将其作为全局对象来访问；

特征

nodeType 的值为 9；

nodeName 的值为"#document"；

nodeValue 的值为 null；

parentNode 的值为 null；

ownerDocument 的值为 null；

其子节点可能是一个 DocumentType（最多一个）、 Element（最多一个）、 ProcessingInstruction或 Comment。

特有属性

documentElement

该属性始终指向 HTML 页面中的<html>元素，判断页面滚动、边距、高度有用！

body

指向<body>元素；

doctype

取得对<!DOCTYPE>的引用，浏览器对 document.doctype 的支持差别很大；

特有方法

createElement()

一个参数，即要创建元素的标签名；

文档信息

title

包含着<title>元素中的文本，反映在浏览器的标题栏中。修改 title 属性的值不会改变<title>元素；

URL

包含页面完整的 URL；

domain

包含页面的域名；

referrer

保存着链接到当前页面的那个页面的 URL；

查找元素

getElementById()

接收一个参数：要取得的元素的 ID，只返回文档中第一次出现的元素；

getElementsByTagName()

接受一个参数，要取得元素的标签名,返回一个 HTMLCollection 对象，作为一个“动态”集合，该对象与 NodeList 非常类似；

getElementsByName()

返回带有给定 name 特性的所有元素；

特殊集合

document.anchors

包含文档中所有带 name 特性的<a>元素；

document.forms

包含文档中所有的<form>元素，与 document.getElementsByTagName("form")得到的结果相同；

document.images

包含文档中所有的<img>元素，与 document.getElementsByTagName("img")得到的结果相同；

document.links

包含文档中所有带 href 特性的<a>元素。

文档写入

write()

writeln()

open()

close()

Element类型

说明

Element 类型就要算是 Web 编程中最常用的类型了；

特征

nodeType 的值为 1；

nodeName 的值为元素的标签名；

nodeValue 的值为 null；

parentNode 可能是 Document 或 Element；

其子节点可能是 Element、 Text、 Comment、 ProcessingInstruction、 CDATASection 或EntityReference。

特有属性

tagName

与nodeName相同,专有属性！

HTML 元素

元素在文档中的唯一标识符；

title

有关元素的附加说明信息，一般通过工具提示条显示出来；

lang

元素内容的语言代码，很少使用；

dir

语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），也很少使用；

className

与元素的 class 特性对应，即为元素指定的 CSS 类。没有将这个属性命名为 class，是因为 class 是 ECMAScript 的保留字。

取得特性

getAttribute()

传递给 getAttribute()的特性名与实际的特性名相同，得到 class 特性值，应
该传入"class"而不是"className"；

setAttribute()

这个方法接受两个参数：要设置的特性名和值；

removeAttribute()

用于彻底删除元素的特性；

attributes属性

getNamedItem(name)

返回 nodeName 属性等于 name 的节点；

removeNamedItem(name)

从列表中移除 nodeName 属性等于 name 的节点；

setNamedItem(node)

向列表中添加节点，以节点的 nodeName 属性为索引；

item(pos)

返回位于数字 pos 位置处的节点。

Text类型

特性

nodeType 的值为 3；

nodeName 的值为"#text"；

nodeValue 的值为节点所包含的文本；

parentNode 是一个 Element；

不支持（没有）子节点；

通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本。

方法

appendData(text)：

将 text 添加到节点的末尾。

deleteData(offset, count)：

从 offset 指定的位置开始删除 count 个字符。

insertData(offset, text)

在 offset 指定的位置插入 text。

replaceData(offset, count, text)

用 text 替换从 offset 指定的位置开始到 offset+
count 为止处的文本。

splitText(offset)

从 offset 指定的位置将当前文本节点分成两个文本节点。

substringData(offset, count)

提取从 offset 指定的位置开始到 offset+count 为止
处的字符串。

创建文本节点

createTextNode()

方法接受一个参数——要插入节点中的文本

规范化文本节点

normalize()

将所有文本节点合并成一个节点，结果节点的 nodeValue 等于将合并前每个文本节点的 nodeValue 值拼接起来的值

分割文本节点

splitText()

这个方法会将一个文本节
点分成两个文本节点，即按照指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位
置之前的内容，新文本节点将包含剩下的文本。

Attr类型

特性

nodeType 的值为 2；

nodeName 的值是特性的名称；

nodeValue 的值是特性的值；

parentNode 的值为 null；

在 HTML 中不支持（没有）子节点；

在 XML 中子节点可以是 Text 或 EntityReference。

Attr 对象有 3 个属性： name、 value 和 specified。其中， name 是特性名称（与 nodeName 的
值相同）， value 是特性的值（与 nodeValue 的值相同），而 specified 是一个布尔值，用以区别特
性是在代码中指定的，还是默认的。

创建节点

createAttribute()

不建议直接访问特性节点。实际上，使用 getAttribute()、setAttribute()
和 removeAttribute()方法远比操作特性节点更为方便。

1、直接赋值
var div = document.createElement('div');
div.title = 'title';
div.a = 'a'
// <div title="title"></div>
//可以看到非标准属性通过直接赋值不会出现在dom中！

2、setAttribute
div.setAttribute('name' ,'name');
div.setAttribute('b','b');
//通过这种方法非标准的属性也会传入到dom中；
// <div title="title" name="name" b="b"></div>

3、setAttributeNode
var attr = document.createAttribute('dir');
var attr1 = document.createAttribute('c');
attr.nodeValue = 'ltr';
attr1.nodeValue = 'c';
div.setAttributeNode(attr);
div.setAttributeNode(attr1);
// <div title="title" name="name" b="b" dir="ltr" c="c"></div>div
//通过这种方法非标准的属性也会传入到dom中；

4、attributes.setNamedItem()方法
var div = document.createElement('div');
var attr1=document.createAttribute('title');
attr1.nodeValue= 'title';
var attr2 = document.createAttribute('a');
attr2.nodeValue = 'a'
div.attributes.setNamedItem(attr1);
div.attributes.setNamedItem(attr2);
//<div title="title" a="a"></div>
//方法非标准的属性同样会传入到dom中；

我们总结了四种添加属性的方法