dom

DOM

选取文档元素

  • 用指定的id属性
    • getElementById(id)
    • 返回element对象
  • 用指定的name属性
    • getElementByName(name)
    • 返回NodeList对象
  • 用指定的标签名字
    • getElementByTagName(tag_name)
    • 返回NodeList对象
  • 用指定的CSS类
    • getElementByClassName(class)
    • 返回NodeList对象
  • 匹配指定的CSS选择器
    • queueSelectorAll()
    • 返回NodeList对象

NodeList对象不是历史文档状态的一个静态快照,而通常是实时的,并且当文档变化时它们所包含的元素列表能随之改变,这是其中一个最重要和令人惊讶的特性。

但是通过queueSelectorAll() 返回的NodeList对象并不是实时的。它包含在调用时刻选择器所匹配的元素,但它并不更新后续文档的变化。

文档结构与遍历

parentNode

该元素的父节点。

childNodes

只读的类数组对象,它是该节点的子节点的实时表示

firstChild, lastChild

该节点的子节点中的第一个和最后一个,如果该节点没有子节点则为null

nextSiblings, prevSublings

该节点的兄弟节点的前一个和下一个。

nodeType

该节点的类型。9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点。

nodeValue

Text节点或Comment节点的文本内容

nodeName

元素的标签名,以大写形式表示

setAttribute(name, value)

设置元素的属性

getAttribute(name)

得到元素指定的属性

hasAttribute(name)

检测元素是否存在指定的属性

removeAttribute(name)

删除元素指定的属性

innerHTML

获取元素的内容(HTML字符串); 在元素上设置该属性调用了Web浏览器的解析器,用新字符串内容的解析展现形式替换元素当前内容。

textContent, (IE innerText)

获取纯文本形式的元素内容,或者在文档中插入纯文本

创建,插入和删除文本

document.createElement()

// 创建一个
                    
                    

你可能感兴趣的:(dom)