javaScript基础(14):(dom选择器)

199 阅读1分钟

打好基础,查漏补缺

基础是重中之重

dom

dom是html和xml的文档编程接口。即一系列操作html和xml的方法集合。

Dom结构树

代表整个文档。html是文档中的根标签。

Node    Document        HTMLDocument
                        XMLDocument
                        
        characterData   Text
                        Comment
                        
        Element         HTMLElement     HTMLHeadElement 
                                        HTMLTitleElement
                                        
        attr

Document的原型上定义了一些属性, documentElement指代文档根元素 即html

getElementById 定义在Document.prototype上。

HTMLDocument 的原型上定义了一些属性, body,head分别指代相应标签

getElementsByName 定义在HTMLDocument.prototype上。

getElementsByClassName ,querySelector, querySelectorAll ,getElementsByTagName 在 Document.prototype和 Element.rpototype上均有定义.

查看元素节点

1.document.getElementById() // ie8以下会查出name值相同的

2.document.getElementsByTagName() 

3.document.getElementsByName()  

4.document.getElementsByClassName() // ie8及以下不支持

css选择器 但是是静态的,一个副本。

5.document.querySelector() // ie7及以下不支持

6.document.querySelectorAll()

遍历节点树

selector.parentNode

selector.childNode

selector.firstChild

selector.lastChild

selector.nextSibling

selector.previousSibling

遍历元素节点树

selector.parentElement

selector.children

selector.firstElementChild

selector.lastElementChild

selector.nextElementSibling

selector.previousElementSibling

元素节点的操作

document.createElement

document.createTextNode

document.createComment

document.appendChild()

document.insertBefore(a,b)

parent.removeChild()

Selector.remove()

parent.replaceChild(new,old)

节点的四个属性

1.nodeName

2.nodeType

3.nodeValue

4.attributes

nodex.hasChildNodes() // 判断是否有子节点 window.getComputedStyle(ele,bull) // 获取计算样式表