JavaScript的理解记录

Posted 凉城

tags:

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

---接上篇:

三、DOM解析:

    1、Document Object Model(DOM):是表示和操作html和XML文档内容的基础API;其中几个重要的类有:Document和Element,Text,这三个也是Node的其中几个子类; 

           2、文档元素的选取:返回值是Element或Element组成的数组NodeList;

                       通过ID :      document.getElementById(‘id‘); 

          通过name:       document.getElementsByName(‘name‘);

        通过tagName:      document.getElementsByTagName(‘span‘);  

        通过CSS类:    document.getElementsByClassName(‘c1 c2 c3‘);

                 //参数中class有多个时,只关心名称,顺序无关紧要;

                      通过CSS选择器:  document.querySelectorAll()和document.querySelector() 参数是包含一个CSS选择器的字符串参数,返回一个NodeList对象或Element;功能与JQuery类库中的$()相似,两者参数相同,不同的是:$()返回值为一个JQuery对象表示匹配的元素集,JQuery对象是一个类数组,可以用标准的数组标示方括号来访问JQuery对象的内容;也可以用toArray()方法来将JQuery对象转化为真实的数组; 参数举例:1、ID: #nav 2、 标签名:div 3、class属性值:.success 4、基于属性值:input[name=‘button‘]; 5、组合使用:span.fatal.error //其class中包含fatal和error的所<span>元素;

     3、 文档结构:作为节点树的解析(还有一种是作为元素树解析,将文档看做Element对象树,忽略Text和Comment节点)

          节点Node对象主要以下几个重要属性:

           1、parentNode: 父节点,没有为null;

           2、childNodes  : 节点的子节点的实时表示,值为NodeList对象;

           3、firstChild,lastChild:节点的子节点的第一个和最后一个节点,没有为null;

             4、nextSibling和previousSibling: 节点的兄弟节点的前一个和后一个;

           5、nodeType: 该节点类型; 9代表Document节点 1代表Element节点 3代表Text节点,8代表comment节点;

             6、nodeValue:Text节点的文本内容;

           7、nodeName: 元素的标签名,大写;

             8、attributes : 元素的所有属性,只读的类数组对象;

    4、元素内容:依据Element不同属性获取不同内容;

         innerHTML : 元素的内容作为字符串返回;

         outerHTML :返回的字符包含查询元素的开头和结尾标签;(HTML5才有且FireFox浏览器不支持)

         textContent: 返回纯文本;IE不支持

           innerText:也是返回纯文本,但不返回<script>元素的内容;FireFox不支持;

     5、 节点的增删:操作文档进行文档节点的增加和删除

          

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

JavaScript的理解记录

JavaScript原型理解

JavaScript 相关记录

JavaScript的一些记录

拾遗理解Javascript中的Arguments

JavaScript 词法静态动态作用域初级理解