js-DOM节点总结

最新推荐文章于 2024-07-17 22:20:08 发布

休沢

最新推荐文章于 2024-07-17 22:20:08 发布

阅读量150

点赞数

分类专栏： js高级应用文章标签： javascript

本文链接：https://blog.csdn.net/qq_44735496/article/details/107923595

版权

js高级应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

DOM 节点

DOM 节点

				 nodeType 属性	 	nodeValue 			nodeName
文档				9					Null			#document
元素节点				1					Null			大写的标签名
属性节点				2					属性值			属性名
文本节点				3					文本内容			#text
注释节点				8					注释内容			#comment
	


方法对比：
		方法名					兼容情况			返回值				能否兼容    能否返回数组
	getElementById()			都兼容			返回一个值				能			不能
	getElementsByTagName()		都兼容			HTMLCollection对象		能			能
	getElementsByName()			都兼容			NodeList对象			能			不能
	getElementsByClassName()	Ie9.0			HTMLCollection对象		能			能
	querySelector				Ie8.0			返回第一值				能			能
	querySelectorAll			Ie8.0			NodeList对象			能			能

关于元素节点方法

创建元素节点: document.createElement(“p”);
创建文本节点: document.createTextNode(“Hello World”);
创建注释节点: document.createComment(“My personal comments”);
插入节点： ParentNode.appendChild(newNode);
添加节点：父元素.appendChild(“添加的子元素”) ； inserBefore(target,position) 在position之前插入target
删除节点：removeChild：在指定的父节点里面删除指定子节点，并返回被删除节点，相当于剪切； remove：直接销毁自己
替换节点：parent.replaceChild(new,origin); //上镜率不高，origin被“剪切”出来
克隆节点：
cloneNode(map)
map为false，只复制当前节点
map为true，复制当前节点及其所有子节点

在这里插入图片描述
所有dom对象都具有以下两大类属性，允许链式操作。

遍历节点树：

请注意子节点只算第一层的，孙子节点不在子节点的范畴内

parentNode–>父节点（最顶端的parentNode为#document 文档）

childNodes–>子节点们（判断有无方法：node.hasChildNodes()） NodeList 对象

firstChild–>第一个子节点

lastChild–>最后一个子节点

nextSibling–>后一个兄弟节点

previousSibling–>前一个兄弟节点

这些节点中可能存在换行节点：对于父节点操作子节点会造成不便，所以有时候要基于元素节点遍历，过滤掉换行节点。

基于元素节点树的遍历：

parentElement ：返回当前元素的父元素节点（最顶端为html元素）【注】IE 9 及以上支持

Children ：children只返回当前元素的元素子节点 node.childElementCount === node.children.length 。当前元素节点的子元素节点个数【注】IE6 到 IE8 完全支持 children 属性，但是，只返回元素节点和注释节点，IE9 以上版本只返回元素节点。

firstElementChild：返回的是第一个元素节点；【注】IE 9 及以上支持

lastElementChild： 返回的是最后一个元素节点；【注】IE 9 及以上支持

previousElementSibling： 返回后一个兄弟元素节点；【注】IE 不支持

nextElementSibling：返回后一个兄弟元素节点；【注】IE 不支持

特殊节点的获取：

document.head：获取head标签
document.body：获取body标签
Document.documentElement：获取html标签
Document.links：获取所有的链接节点，返回HTMLCollection对象
Document.images：获取所有的img标签，返回HTMLCollection对象
Document.forms：获取所有的form标签，返回HTMLCollection对象