首页 > 代码库 > DOM之节点树操作

DOM之节点树操作

2024-10-25 14:05:02   207人阅读

节点树

　　 每个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  获取当前节点的元素节点的个数

 

 

 

DOM之节点树操作


联系
我们