JavaScript Node节点类型
2019-04-28 13:54:42 1 举报AI智能生成
为你推荐
查看更多
JavaScript 常见node节点类型
作者其他创作
大纲/内容
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()
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 的值为元素的标签名；
parentNode 可能是 Document 或 Element；
其子节点可能是 Element、 Text、 Comment、 ProcessingInstruction、 CDATASection 或EntityReference。
tagName
HTML 元素
id
元素在文档中的唯一标识符；
有关元素的附加说明信息，一般通过工具提示条显示出来；
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 添加到节点的末尾。
从 offset 指定的位置开始删除 count 个字符。
在 offset 指定的位置插入 text。
用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本。
splitText(offset)
从 offset 指定的位置将当前文本节点分成两个文本节点。
提取从 offset 指定的位置开始到 offset+count 为止处的字符串。
创建文本节点
createTextNode()
方法接受一个参数——要插入节点中的文本
规范化文本节点
normalize()
将所有文本节点合并成一个节点，结果节点的 nodeValue 等于将合并前每个文本节点的 nodeValue 值拼接起来的值
分割文本节点
splitText()
这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。
Attr类型
nodeType 的值为 2；
nodeName 的值是特性的名称；
nodeValue 的值是特性的值；
在 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\
我们总结了四种添加属性的方法
0 条评论
回复 删除
下一页
