js DOM Element属性和方法整理

时间:2021-07-20 05:28:44

节点操作,属性

1. childNodes、children

这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1。

childNodes获取到的是NodeList

children获取到的是HTMLCollection

NodeList and HTMLCollection

他们都提供了name(Number index)方法用来索引元素,可以直接用[index]来引用;

他们的区别在于NodeList没有提供namedItem(String name)方法

HTMLCollect提供了这个方法,可以根据id或者name属性来获取集合的内部元素。

但是不同的浏览器对这些方法的实现有区别,所以最好就直接用[index]来索引。

2. firstChild lastChild firstElementChild lastElementChild

firstChild和lastChild获取到的元素也要判断下nodeType才可以使用

firstElementChild和lastElementChild可以直接获取到Element类型的节点,IE9+,ff,chrome,safari,opera支持

3. nextSibling previousSibling nextElementSibling previousElementSibling

同上

4. parentNode

可以是 Element、Document或DocumentFragment类型

5. nodeType nodeName nodeValue tagName

nodeType属性返回一个整数,根据节点类型的不同而有不同的值

nodeType Named Constant nodeName nodeValue
1 ELEMENT_NODE 标签名 null
2 ATTRIBUTE_NODE 属性名 属性值
3 TEXT_NODE #text 节点文本
4 CDATA_SECTION_NODE #cdata-section 节点文本
5 ENTITY_REFERENCE_NODE  实体引用名 null
6 ENTITY_NODE 实体名 null
7 PROCESSING_INSTRUCTION_NODE  --  --
8 COMMENT_NODE #comment 注释文本
9 DOCUMENT_NODE #document null
10 DOCUMENT_TYPE_NODE  doctype的内容 null
11 DOCUMENT_FRAGMENT_NODE #document-fragment null
12 NOTATION_NODE   null

IE9+等浏览器有NODE.ELEMENT_NODE等定义

对于Element节点来说,nodeName与tagName是一样的,返回全大写的标签名

其他类型的节点有nodeName而没有tagName

6. innerHTML outerHTML

节点操作,方法

1. insertBefore

2. appendChild

3. removeChild

4. replaceChild

5. insertAdjacentHTML

6. hasChildNodes

cloneNode

选择器

7. getElementById getElementsByName getElementsByTagName getElementsByClassName

querySelector querySelectorAll

属性

7. attributes

8.  hasAttribute getAttribute setAttribute removeAttribute hasAttributes

位置,尺寸

clientHeight clientWidth clientLeft clientTop

offsetHeight offsetWidth offsetLeft offsetTop

offsetParent

scrollHeight scrollWidth scrollLeft scrollTop

getBoundingClientRect()

getClientRects()

参考文档:https://developer.mozilla.org/en-US/docs/Web/API/element

http://www.w3school.com.cn/xmldom/dom_nodetype.asp

http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/Node.html