JavaScript基础(22)_DOM查询

获取元素节点对象

通过window的属性 "document对象" 调用(注意看:element没s的才是一个,带s的是一类数组):
1、getElementById():通过id属性获取一个元素节点对象。
2、getElementsByTagName():通过标签名获取一组元素节点对象(类数组对象)。
3、getElementsByName():通过name属性获取一组元素节点对象(类数组对象)。
4、getElementsByClassName():通过class属性获取一组元素节点对象(类数组对象,不支持IE8及以下的浏览器)。
5、querySelector():通过css选择器的字符串作为参数来获取一个元素节点对象(推荐)
6、querySelectorAll():通过css选择器的字符串作为参数来获取所有元素节点对象(推荐,类数组对象)

获取元素节点对象的父节点、兄弟元素、兄弟节点

通过 "具体的元素节点对象" 调用:
1、parentNode:属性,表示当前对象的父节点对象。
2、previousElementSibling:属性,获取前一个兄弟元素对象(不支持IE8及以下的浏览器)。
3、nextElementSibling:属性,获取后一个兄弟元素对象(不支持IE8及以下的浏览器)。
4、previousSibling:属性,获取前一个兄弟节点对象(包括空白文本节点)。
5、nextSibling:属性,获取后一个兄弟节点对象(包括空白文本节点)。

获取元素节点对象的后代节点、子元素、子节点

通过 "具体的元素节点对象" 调用:
1、getElementsByTagName():方法,通过标签名获取一组 "当前节点对象" 的 "后代节点对象"。(此时范围为当前节点对象内,而非整个文档)
2、children:属性,获取当前元素的所有子元素。
3、firstElementChild:属性,获取当前元素的第一个子元素(不支持IE8及以下的浏览器)。
4、childNodes:属性,表示当前节点的所有子节点(包括空白文本节点在内的所有子节点)。
5、firstChild:属性,表示当前节点的第一个子节点(包括空白文本节点)。
6、lastChild:属性,表示当前节点的最后一个子节点(包括空白文本节点)。
注意:在IE8及以下的浏览器中,不会将空白文本节点当成子节点。

获取元素节点对象的属性

语法:元素.属性名。
例如:元素.id  元素.name  元素.value。
innerHTML:属性,获取元素内部的HTML代码,对于自结束标签,这个属性没有意义。
innerTEXT:属性,获取元素内部的文本内容。
nodeValue:属性,获取节点对象内部的文本内容。(其实 firstChild.nodeValue 和 innerHTM 等价 )
注意:读取class属性时,class作为js保留字不能采用这种方式(如元素.class),应改为元素.classname。

获取body标签

var body = document.body    
相当于:var body = getElementsByTagName("body")[0]。

获取html根标签

var html = document.documentElement   
相当于:var html = getElementsByTagName("html")[0]。

获取页面中所有的元素

var all = document.all
相当于:var all = getElementsByTagName("*")。


 

你可能感兴趣的:(JavaScript,javascript,前端)