JavaScript对象的chapterIII

Posted 很污的文杰

tags:

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

 

二、DOM对象:

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

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

 

 


                  

一、节点
        

         元素节点:

 

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

 

         文本节点:

 

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

 

         属性节点:

 

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

 

 

 

二、获取文档对象:

         1. querySelector()

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

         2. querySelectorAll()

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

 

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

         3.getElementById()

                   获取给定id属性值的元素节点相对应的对象。

         4.getElementsByTagName()

                   获取文档里给定标签的所有符合条件的元素,返回对象数组

         5.getElementsByName()

                   通过 name 获取一个对象数组

         6.getElementsByClassName()

                   通过 classname 获取一个对象数组

三、间接引用节点:

         1.引用子节点:

                   childNodes[]:

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

 

                   firstChild:

                            第一个子节点。

 

                   lastChild:

                            最后一个子节点。

 

         2.引用父节点:

                   parentNode:

                            除了根节点外,每个节点都仅有一个父节点。

 

         3.引用兄弟节点:

                   nextSibling:

                            引用下一个兄弟节点。

                   previousSibling:

                            引用上一个兄弟节点。        

 

四、获取节点信息:

         1.获取节点名称——nodeName

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

 

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

 

                   文本节点:返回文本 #text

 

         2.获取节点类型——nodeType

                   元素节点:返回 1

 

                   属性节点:返回 2

 

                   文本节点:返回 3

 

         3.获取节点的值——nodeValue

                   元素节点:返回null

 

                   属性节点:返回节点值

 

                   文本节点:返回文本内容

 

五,处理节点

         1.属性节点:

                   获取节点属性值——getAttribute

                  

                   设置节点属性值——setAttribute

 

         2.文本节点:

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

 

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

 

         3.空白节点:

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

 

                   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);

                                    }

                            }

 

                }       

 

以上是关于JavaScript对象的chapterIII的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript学习-JavaScript内置对象1-对象概述

javascript 如何获取后台的对象???

JavaScript 对象

JavaScript对象

JavaScript对象与Json的联系

JavaScript学习——JavaScript对象