阅读 95

再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解

DOM模型将整个文档(XML文档和HTML文档)看成一个树形结构,并用document对象表示该文档。

根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

DOM规定文档中的每个成分都是一个节点(Node),可以说HTML文档是由节点构成的集合,常见DOM节点有:

  • 文档节点(Document):代表整个文档

  • 元素节点(Element):文档中的一个标记

  • 文本节点(Text):标记中的文本

  • 属性节点(Attr):代表一个属性,元素才有属性

DOM节点类型

NodeType属性来表明节点类型,下面列举12中节点类型

节点类型

描述

1

Element

代表元素

2

Attr

代表属性

3

Text

代表元素或属性中的文本内容。

4

CDATASection

代表文档中的 CDATA 部分(不会由解析器解析的文本)。

5

EntityReference

代表实体引用。

6

Entity

代表实体。

7

ProcessingInstruction

代表处理指令。

8

Comment

代表注释。

9

Document

代表整个文档(DOM 树的根节点)。

10

DocumentType

向为文档定义的实体提供接口

11

DocumentFragment

代表轻量级的 Document 对象,能够容纳文档的某个部分

12

Notation

代表 DTD 中声明的符号。

DOM节点关系

nodeType

返回节点类型的数字值(1~12)

nodeName

元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document

nodeValue

文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null

hasChildNodes

包含一个或多个节点时返回true

contains

如果是后代节点返回true

isEqualNode

两个节点引用的是同一个对象:传入节点与引用节点的引用为同一个对象返回true

isSameNode

指的是两个节点是否是同一类型,具有相等attributes/childNodes等

compareDocumentPostion

确定节点之间的各种关系

parentNode

父节点

parentElement

父节点标签元素

childNodes

所有子节点

children

第一层子节点

firstChild

第一个子节点,Node 对象形式

firstElementChild

第一个子标签元素

lastChild

最后一个子节点

lastElementChild

最后一个子标签元素

previousSibling

上一个兄弟节点

previousElementSibling

上一个兄弟标签元素

nextSibling

下一个兄弟节点

nextElementSibling

下一个兄弟标签元素

childElementCount

第一层子元素的个数(不包括文本节点和注释)

ownerDocument

指向整个文档的文档节点

节点与元素的区别

element是包含在node里的,它的nodeType是1

parentElement匹配的是parent为element的情况,而parentNode匹配的则是parent为node的情况。

当父节点的nodeType不是1,即不是element节点的话,它的parentElement就会是null

Document文档对象元素查找

BOM核心为window,DOM核心为document(文档对象)

获取Element对象

getElementById()

一个参数:元素标签的ID

getElementsByTagName()

一个参数:元素标签名

getElementsByName()

一个参数:name属性名

getElementsByClassName()

一个参数:包含一个或多个类名的字符串

querySelector()

接收CSS选择符,返回匹配到的第一个元素,没有则null

querySelectorAll()

接收CSS选择符,返回一个数组,没有则返回[]

元素对象ELEMENT操作

所有DOM对象都可以被认为是一个节点,除了CURD DOM树(appendChild/removeChild/replaceChild)外,还有其他操作

nodeName

访问元素的标签名

tagName

访问元素的标签名

createElement()

创建节点

appendChild()

末尾添加节点,并返回新增节点

insertBefore()

参照节点之前插入节点,两个参数:要插入的节点和参照节点

insertAfter()

参照节点之后插入节点,两个参数:要插入的节点和参照节点

replaceChild()

替换节点,两个参数:要插入的节点和要替换的节点(被移除)

removeChild()

移除节点

cloneNode()

克隆,一个布尔值参数,true为深拷贝,false为浅拷贝

importNode()

从文档中复制一个节点,两个参数:要复制的节点和布尔值(是否复制子节点)

insertAdjacentHTML()

插入文本,两个参数:插入的位置和要插入文本

  • "beforebegin",在该元素前插入

  • "afterbegin",在该元素第一个子元素前插入

  • "beforeend",在该元素最后一个子元素后面插入

  • "afterend",在该元素后插入

节点属性attributes

attributes

获取所有标签属性

getAttribute()

获取指定标签属性

setAttribute()

设置指定标签属

removeAttribute()

移除指定标签属

createAttribute

创建属性

参考文章:

ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)www.cnblogs.com/best/p/8028…

JavaScript学习总结(三)BOM和DOM详解 segmentfault.com/a/119000000…

Javascript操作BOM和DOM详解(1) blog.csdn.net/openbox2008…

JavaWeb学习总结:JavaScript(BOM和DOM) blog.csdn.net/weixin\_423…

HTML DOM Event 对象 www.w3school.com.cn/jsref/dom_o…

XML DOM - Element 对象 www.w3school.com.cn/xmldom/dom_…

JAVAScript中DOM与BOM的差异分析 www.cnblogs.com/fjner/p/589…

转载本站文章《再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解》,
请注明出处:www.zhoulujun.cn/html/webfro…

文章分类
前端
文章标签