DOM Node

最新推荐文章于 2024-08-27 15:48:31 发布

编程爱好者ph

最新推荐文章于 2024-08-27 15:48:31 发布

阅读量441

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_33193871/article/details/120963571

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

大纲

Node概述
Node的属性
Node的方法
HTML元素操作方法
HTML内的元素的操作方法

Node概述

[DOM]

DOM是文档对象模型的简称。它的基本思想是：
把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构(DOM Tree)。
所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目标(比如增删内容)。

所以，DOM可以理解成文档的编程接口。

严格地说，DOM不属于JavaScript
但是操作DOM时JavaScript最常见的任务。
而JavaScript也是最常用与DOM操作的语言

node是DOM的最小组成单位，一个文档的树形结构就是由各种不同类型的节点组成。
对于HTML文档，node主要有以下六种类型：

节点	名称	含义
Document	文档node	整个文档(window.document)
DocumentType	文档类型node	文档的类型(比如)
Element	元素node	HTML元素(比如等)
Attribute	属性node	HTML元素的属性(比如class=‘right’)
Text	文本node	HTML文档中出现的文本
DocumentFragment	文档碎片node	文档的片段

Node的属性

通用属性：nodeName、nodeType
返回当前node的相关节点属性：ownerDocument、nextSibing、previousSibling、parentNode、parentElement
返回node内容属性：textContent、nodeValue
返回当前node子节点相关属性：childNodes、firstChild、lastChild

通用属性

nodeName属性返回节点的名称，nodeType属性返回节点的常数值。

类型	nodeName	nodeType
DOCUMENT_NODE	#document	9
ELEMENT_NODE	大写的HTML元素名	1
ATTRIBUTE_NODE	等同于Attr.name	2
TEXT_NODE	#text	3
DOCUMENT_FRAGMENT_NODE	#document_fragment	11
DOCUMENT_TYPE_NODE	等同于DocumentType.name	10

window.alert(document.nodeType); //9
window.alert(document.querySelector('a').nodeType);//1
window.alert(document.querySelector('a').nodeType===Node.ELEMENT_NODE) //true

返回当前node的相关节点属性

[ownerDocument]
ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。

var a = document.querySelector('a');
console.log(a.ownerDocument); //#document
console.log(a.ownerDocument.ownerDocument);//null

document对象本身的ownerDocument属性，返回null.

[nextSibling]
nextSibling属性返回紧跟在当前节点后面的第一个同级节点。
如果当前节点后面没有同级节点，则返回null。

该属性还包括文本节点和评论节点，因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格。

[previousSibling]
previousSibling属性返回当前节点前面的第一个同级节点。
如果当前节点前面没有同级节点，则返回null。

对于当前节点前面有空格，则previoussilbling属性会返回一个内容为空格的文本节点。
回车也算是文本节点。

[parentNode]
parentNode属性返回当前节点的父节点。
如果当前节点没有父节点，则返回null(document节点)。

一般情况下，一个节点的父节点只可能是三种类型：element节点、document节点和documentfragment节点。

[parentElement]
parentElement属性返回当前节点的父元素节点。
如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。

parentElement是ie所独有的属性，其能实现的功能parentNode都能实现。可以说parentNode是parentElement的标准版本。

返回当前node的内容的属性：textContent、nodeValue。

[textContent]
textContent属性返回当前节点和它的所有后代节点的文本内容。

[nodeValue]
nodeValue属性返回或设置当前节点的值，格式为字符串。
但是nodeValue只对Text节点、Comment节点、XML文档的CDATA节点有效，其他类型的节点一律返回null。

<div>
<span>这是一个span标签</span>
<script>
    var span = document.querySelector('span');
    console.log(span.nodeValue); //null
    console.log(span.firstChild.nodeValue);//这是一个span标签
</script>
</div>

返回当前节点的子节点的属性

[childNodes]
返回一个节点集合(NodeList)，节点集合中包括当前节点的所有子节点。

除了HTML中的元素节点之外，该属性返回的还包括Text节点和Comment节点。
如果当前节点不包括任何子节点，则返回一个空的NodeList集合。
由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。

[firstChild]
返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
除了HTML元素子节点，该属性还包括文本节点和评论节点。

[lastChild]
lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。

Node的方法

appendChild(),hasChildNodes();
cloneNode(),insertBefore(),removeChild(),replaceChild()
contains(),isEqualNode()

[appendChild()]

appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。

var p = document.createElement('p');
p.innerText = '我是P标签';
document.body.appendChild(p);

js创建的节点对象之间没有文本对象

[hasChildNodes()]

hasChildNodes()方法返回一个布尔值，表示当前节点是否有子节点。

[cloneNode()]

方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。默认是false，即不克隆子节点。

克隆一个节点，会拷贝该节点的所有属性，但是会丧失addEventListener方法和on-属性(即node.onclick = fn)添加在这个节点上的事件回调函数。

[insertBefore()]

insertBefore方法用于将某个节点插入当前节点的指定位置。
它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。
该方法返回被插入的新节点，根据情况不是必须创建变量来保存。

[removeChild()]

removeChild方法接受一个子节点作为参数，用于从当前节点移除该节点。
它返回被移除的节点，根据情况不是必须创建变量来保存。

[replaceChild()]

replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
它接受两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换走的子节点。它返回被替换走的那个节点。

[contains]

contains方法接受一个节点作为参数，返回一个布尔值。
contains方法表示判断[参数节点]是否为[当前节点]的子节点。

节点自身包含自身的结果是真的。

[isEqualNode()]

isEqualNode方法返回一个布尔值，用于检查两个节点是否相等。

所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。

HTML元素

html元素是网页的根元素，document.documentElement就指向这个元素。js中关于html元素也提供了一些相关的属性和方法来帮助我们更好的操作：

视图窗口大小：clientWidth属性，clientHeight属性
html元素大小：offsetWidth属性，offsetHeight属性

clientWidth和clientHeight这两个属性返回的事视口(viewport)的大小，单位为像素。
clentWidth和clientHeight在计算视图大小的时候不计算滚动条部分。
window.innerWidth和window.innerHeight包括了滚动条的高度和宽度。

HTML内的元素

元素位置相关的属性

[offsetParent]
offsetParent表示获取距离[当前元素]的最靠近的、并且CSS的position属性不等于static的父元素。
[offsetTop]
当前HTML元素左上角相对于offsetParent的垂直位移。
[offsetLeft]
当前HTML元素左上角相对于offsetParent的水平位移。

获取元素对象的方法

可以通过getElementById方法来获取页面中的任意元素，再介绍4种选择元素的方法。

querySelector方法
querySelectorAll方法
getElementsByTagName方法
getElementsByClassName方法

querySelector系列方法与getElementsBy系列方法对比有什么不同？

两者的W3C标准不同
querySelector系列属于W3C中的Selectors API(JS)规范
getElementsBy系列则属于W3C的DOM规范。
两者的浏览器的兼容不同
querySelector系列基本能被所有浏览器支持。
getElementsBy系列则通常只有在考虑兼容性的时候才被提起(尽管两者功能近似)
接受参数不同
querySelector系列接受的参数是一个css选择器名。
getElementsBy系列接受的只能是单一的className、tagName和name。
返回值不同
querySelectorAll()返回的事一个静态节点列表
getElementsBy()系列返回的是一个动态节点列表

元素属性的相关方法

hasAttribute()
getAttribute()
setAttribute()
removeAttribute()
removeAttributeNode()# 大纲

Node概述
Node的属性
Node的方法
HTML元素操作方法
HTML内的元素的操作方法