1.获取文档对象。
a.querySelector():通过传入合法的CSS选择器,即可获取符合条件的第一个元素。
document.querySelector("#test"); //返回id为test的首个元素;
b.querySelectorAll():通过传入合法的CSS选择器,即可获取所有符合条件的元素,返回对象数组。
document.querySelectorAll("div.foo"); //返回所有带有foo类样式的div元素
注意:上述两个方法无法查找到带有伪类状态的元素,比如:querySelector(":hover")不会得到期望的结果。
c.getElementById():返回一个与给定id属性值的元素节点相对应的对象。
document.getElementById(‘box‘);
d.getElementsByTagName():返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。
document.getElementsByTagName(‘li‘);
e.getElementByName():通过name获取一个对象数组。
2.间接引用节点。
a.引用子节点:每个节点都有一个childNodes集合属性,类型是数组对象。表示该节点的所有子节点的集合。这些子节点按照其在文档中出现的顺序排列,因此可以通过索引来依次访问各个子节点。
document.childNodes[0]; //文档头声明; document.childNodes[1]; //文档根对象; document.childNodes[1].childNodes[0]; //引用<head>节点; document.childNodes[1].childNodes[1]; //引用<body>节点;
除了childNodes属性,还有两个属性可以用于引用子节点,分别是:element.firstChild;和elementlastChild;它们分别表示了第一个子节点和最后一个子节点。
b.引用父节点:html的节点层次是一个树状结构,除了根节点,每个节点都仅有一个父节点,可以由parentNode属性来应用。
element.parentNode;//引用父节点
c.引用兄弟节点:属于同一个文档层次的节点称为兄弟节点,有两个属性可以用于兄弟节点间。
element.nextSibling;//引用下一个兄弟节点;
element.previousSibling;//引用上一个兄弟节点;
3.获取节点信息:在获得一个节点的引用后,有一些方法可以获得该节点的信息。
a.nodeName:获取节点名称。语法:Node.nodeName;
不同类型的节点,nodeName的返回值有所差异:
元素节点:返回标记名称;
属性节点:返回属性名称;
文本节点:返回文本。
b.nodeType:获取节点类型。语法:Node.nodeType;
元素节点:返回1
属性节点:返回2
文本节点返回:返回3
c.nodeValue:获取节点的值。语法:Node.nodeValue;
元素节点:返回null;
属性节点:返回节点值;
文本节点:返回文本的内容;
4.处理属性节点。
a.getAttribute获取属性节点属性值:object.getAttribute(attribute);
var a = document.getElementByTagName(‘a‘); for(var i = 0;i < a.length;i++) { alert(a.[i].getAttribute(‘title‘)); }
b.setAttribute设置节点属性值:object.setAttribute(attribute,value)
var link = document.getElementById(‘link‘); link.setAttribute(‘title‘,‘连接提示信息‘);
5.处理文本节点。
a.node.innerHTML:获取该节点下的包含HTML标签的文本内容。(包含标签的文本)。
var body = document.querySelector(‘body‘); alert(body.innerHTML);
b.node.textContent:获取该节点下的纯文本内容。
var body = document.querySelector(‘body‘); alert(body.textContent);
6.因浏览器而异的空白节点:ie浏览器和火狐浏览器对空白节点的处理方式不同,ie浏览器会忽略这些节点,而火狐浏览器则认可这些节点。
处理方法:1.避免在文档中出现文本节点。2.在使用前先删除其中的空白节点。
function cleanWhitespace(element){
for(var i = 0; i < element.childNodes.length;i++) {
var node = element.childNodes[i];
//判断是否是空白节点,如果是则删除该节点
if(node.nodeType == 3 && /\S/.test(node.nodeValue)) {
node.parentNode.removeChild(node);
}
}
}