首页 > 代码库 > JS七.....
JS七.....
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);
}
}
}
JS七.....