DOM之节点树操作

Posted 2020-09-28

节点树

　　 每个html页面载入浏览器的时候,浏览器都会生成一个树形结构,这个树形结构由节点组成,我们称之为节点树或文档树;

　　每个HTML标签都是元素节点

　　每个标签的属性都是属性节点

　　每个标签的文本内容都是文本节点

节点分为: 元素节点 属性节点  文本节点  注释节点

 

　　nodeType   获取节点的类型

 

　　nodeName   获取节点的名称

 

　　nodeValue  获取节点的值

 

节点	nodeType	nodeName	nodeValue
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容
注释节点	#comment	8	注释内容

 

操作	作用	返回值
document.getElementById(id值)	根据id获取页面指定元素	获取到的是一个元素节点
doument.getElementsByName(name属性值)	据name名称获取页面的指定元素	NodeList,获取到的是一个节点列表,
document.getElementsByClassName(类名)	根据class类名来获取页面的指定元素	NodeList,节点列表
document.getElementsByTagName(标签名)	获取页面中指定的标签元素	NodeList,节点列表
document.getElementsByTagNameNS()	根据命名空间获取指定的元素;
innerHTML	获取或设置标签的内容
innerText	获取或设置标签的文本
tagName	用来获取元素的标签名
Element.getAttribute(字符串参数属性名)	根据指定属性名获取指定属性的值	字符串
Element.setAttribute (字符串参数属性名,字符串参数属性值)	给指定属性设置指定的值;
Element.removeAttribute(字符串参数属性名)	删除元素指定属性
element.childNodes	获取某个元素节点的所有子节点	返回值是NodeList
element.attributes	获取某个元素节点的所有属性节点	返回值是NodeList

innerHTML和innerText的区别?

　　获取标签内容: innerHTML可以获取到标签内部的所有内容,包括文本,标签，属性等;innerText只能获取到标签里面的文本内容;

　　设置标签内容: innerHTML设置的带标签内容,可以被浏览器解析;innerText设置的带标签内容,只会被认为是单纯的文本;

 

基于element元素节点的属性

 

 

childNodes	获取指定元素的所有子节点,包含空白,文本,元素(NodeList)
chidren	获取指定元素的所有元素子节点;(NodeList)
firstChild	获取指定元素的第一个子节点;(Node)
firstElementChild	获取指定元素的第一个元素子节点;(Element)
lastChild	获取指定元素的最后一个子节点;(Node)
lastElementChild	获取指定元素的最后一个元子节点;(Element)
parentNode	获取当前节点的父节点;(Node)
ownerDocument	获取到页面的document节点,一个用浏览器打开的页面就是一个document对象,这个对象也成为document节点
previousSibling	获取当前节点的前一个兄弟节点;(Node)
previousElementSibling	获取当前节点的前一个兄弟元素节点;(Element)
nextSibling	获取当前节点的下一个兄弟节点
nextElementSibling	获取当前节点的下一个兄弟元素节点
attributes	获取当前节点的所有属性节点
childElementCount	获取当前节点的元素节点的个数