码迷,mamicode.com
首页 > Web开发 > 详细

JS七.....

时间:2016-09-08 23:01:43      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

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七.....

标签:

原文地址:http://www.cnblogs.com/lss-bk/p/5854594.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!