9.8 js进阶总结3

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了9.8 js进阶总结3相关的知识,希望对你有一定的参考价值。

DOM文档对象模型

DOM(document object model)文档对象模型,它定义了操作文档对象的接口。

DOM 把一份html文档表示为一棵家谱树,使用parent(父),child(子),sibling(兄弟)等记号来表明家庭成员之间的关系。

一、节点(node)

节点一词来自于网络理论,这代表着网络中的一个个的连接点,网络是由节点构成。

对于html文档也是一样,文档是由节点构成的集合。

1、元素节点

元素节点如<body> <p> <div> 之类的元素,这些元素在文档中的布局形成了文档的结构。

2、文本节点

文本节点指的是元素节点中的内容,但并非所有的元素节点都包含有文本节点。

3、属性节点

元素都或多或少有一些属性,属性的作用是对元素作出更具体的描述。属性节点总是被包含在元素节点当中。

二、获取文档对象

1、querySelector()

HTML5新加入的方法,通过传入合法的CSS选择器,即可获取符合条件的第一个元素

例:document.querySelector("#test"); //返回id为test的首个div

2、querySelectorAll()

HTML5新加入的方法,通过传入合法的CSS选择器,即可获取所有符合条件的元素,返回对象数组

例:document.querySelectorAll("div.foo"); //返回所有带foo类样式的div元素对象

注意:使用这上面两个方法无法查找带伪类状态的元素,比如querySelector(‘:hover‘)不会得到其结果。

3、getElementById()

这个方法返回一个与给定id属性值的元素节点相关对应的对象。

例:document.getElementById(‘box‘);

4、getElementsByIdTagName()

这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。

例:document.getElementByTagName(‘li‘);

5、getElementsByName()

通过name获取一个对象数组

三、间接引用节点(扩展)

除了可以直接引用节点,还可以通过节点间的关系来引用相对节点。

1、引用子节点

每个节点都有一个childNodes集合属性,类型是数组对象,表示该节点的所有子节点的集合。这些子节点按照其在文档中出现的顺序排列,因此可以通过索引来依次访问各个子节点。

例:

document.childNodes[1];  //引用文档的根节点

document.childNodes[0].childNodes[0]  //引用<head>节点

document.childNodes[0].childNodes[1]  //引用<body>节点

除了使用childNodes属性,还有两个属性可以用于引用子节点,分别是:

element.firstChild;

element.lastChild;

它们分别表示第一个子节点和最后一个子节点。

2、引用父节点

html的节点层次是一个树状结构,除了根节点外,每个节点都仅有一个父节点,可以有parentNode属性来引用

element.parent.Node;  //引用父节点

3、引用兄弟节点

属于同一个文档层次的节点称为兄弟节点,有两个属性可以用于兄弟节点间引用,分别是:

element.nextSibling;  //引用下一个兄弟节点

element.previous.Sibling;  //引用上一个兄弟节点

四、获取节点信息(扩展)

在获得一个节点的引用后,有一些方法可以获得该节点的信息。

1、nodeName 获取节点名称

语法:  Node.nodeName;

不同的类型的节点,nodeName的返回值有所差异:

元素节点:返回标记名称;

属性节点:返回属性名称;

文本节点:返回文本 #text

2、nodeType 获取节点类型

语法:Node.nodeType;

元素节点:返回 1

属性节点:返回 2

文本节点:返回 3

3、nodeValue 获取节点的值

语法:Node.nodeValue;

元素节点:返回null

属性节点:返回节点值

文本节点:返回文本内容

五、处理属性节点

1、get.Attribute 获取节点属性值

object.getAttribute(attribute)

例:

var a = document.getElementByTagName(‘a‘);

for(var i = 0; i<a.length; i++){

alert(a[i].get.Attribute(‘title‘));

}

2、set.Attribute() 设置节点属性值

object.setAttribute(attribute, value)

例:

var link = document.getElementById(‘link‘);

link.setAttribute(‘title‘, ‘链接提示信息‘);

六、处理文本节点

1、node.innerHTML

获取该节点下的包含HTML标签的文本内容

例:

var body = document.querySelector(‘body‘);

alert(html.innerHTML);

2、node.textContent

获取该节点下的纯文本内容

例:

var body = document.querySelector(‘body‘);

alert(html.textContent);

七、因浏览器而异的空白节点(扩展)

IE浏览器和Firefox浏览器对空白节点的处理不同,IE浏览器会忽略这些节点,而Firefox浏览器则认可这些节点。

处理方法:

1、避免在文档中出现文本节点

function clearWhitespace(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);

}

}

}

DOM总结:

一份文档就是一棵树;

节点分为不同的类型,分别是:元素节点,属性节点,文本节点;

每个节点都是一个对象;

 

以上是关于9.8 js进阶总结3的主要内容,如果未能解决你的问题,请参考以下文章

9.7 js进阶总结2

ES6 常用总结(前端开发js技术进阶提升总结)

ES6 小结(前端开发js技术进阶提升总结)

vue进阶知识总结

vue进阶知识总结

vue进阶知识总结