DOM

NODE.ELEMENT_NODE.......................................1

NODE.ATTRIBUTE_NODE....................................2

NODE.TEXT_NODE...............................................3

NODE.CDATA_SECTION_NODE.........................4

NODE.ENTITY_REFERENCE_NODE..................5

NODE.ENTITY_NODE..........................................6

NODE.PROCESSING_INSTRUCTION_NODE....7

NODE.COMMENT_NODE....................................8

NODE.DOCUMENT_NODE..................................9

NODE.DOCUMENT_TYPE_NODE.......................10

NODE.DOCUMENT_FRAGMENT_NODE............11

NODE.NOTATION_NODE......................................12

 

判断node类型： someNode.nodeType == 1

someNode.nodeName: 元素标签名

someNode.childNodes[0] (或someNode.childNodes.item(0)) 访问NodeList中的节点

将NodeList转换为数组： let arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0)

someNode.nextSibling: 下一个节点

someNode.previousSibling: 上一个节点

someNode.firstChild = someNode.childNodes[0]

someNode.lastChild = someNode.childNodes[someNode.childNodes.length - 1]

someNode.parentNode: 父节点

someNode.hasChildNodes() : true， 包含子节点

someNode.appendChild(newNode) // 追加节点

someNode.insertBefore(newNode, someNode.childNodes[3]) // 前方插入节点

someNode.replaceChild(newNode, someNode.childNodes[3]) // 替换节点

someNode.remove(soneNode.childNodes[3]) // 移除节点

someNode.clone(true) //复制节点：true,深复制，false，浅复制

someNode.normalize() // 移除空的文本节点

查找元素

<img src="xxx" name="myImage">

var image = document.getElementsByTagName("img")

var myImage = image.namedItem("myImage")

var myImage1 = image["myImage"]

 

document.anchors  包含文档中所有带name特性的<a>元素

document.applets 包含文档中所有的<applet>元素

document.forms 包含文档中所有的<form>元素

document.images 包含文档中所有的<img>元素

document.links 包含文档中所有带href特性的<a>元素

 

document.implementation.hasFeature DOM一致性检测，浏览器支持给定名称和版本的功能，返回true

 

获取元素属性： element.attributes

 

document.querySelector("img .button") 取得类为button的第一个image

document.querySelectorAll("img .button") 取得类为button的第全部image

document.getElementsByClassName("className1 className2") 取得包含className1 className2类名的元素

element.webkitMatchesSelector("body") 判断是否存在

element.mozMatchesSelector("body")

element.msMatchesSelector("body")

element.matchesSelector("body")

 

element.childElementCount 返回子元素（不包括文本节点和注释）的个数

element.firstElementChild 指向第一个子元素

element.lastElementChild 指向最后一个子元素

element.previousElementSibling 指向前一个同辈元素

element.nextElementSibling 指向后一个同辈元素

 

element.classList.remove("className") 删除类

element.classList.add("className") 添加类

element.classList.contains("className") 查找是否存在类 存在返回true

element.classList.toggle("className") 如果存在类则删除，否则添加

 

document.activeElement 当前获得焦点的元素。文档刚加载完成时为document.body

document.hasFocus() 检测文档是否获得了焦点

document.readyState 检测文档是否加载完成 loading 正在加载，complete 加载完成

document.compatMode 检测页面兼容模式 CSS1Compat标准模式 BackCompat 混杂模式

 

document.head = document.getElementsByTagName("head")[0]

document.charset 文档中实际使用的字符集

<div data-appId="12345" data-myName="xx"></div>

element.dataset.appId //12345 获取自定义数据

 

element.insertAdjacentHTML() 插入HTML

element.scrollIntoView()页面滚动到element元素

parentElement.contains(childElement) 检测父元素是否包含该元素 包含返回true

element1.compareDocumentPosition(element2) 检测两元素关系。1无关，2居前，4居后，8包含，16被包含

 

转载于:https://www.cnblogs.com/hanxiaoer/p/11529955.html