• JavaScript的理解记录(5)


    ---接上篇:

    三、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、 节点的增删:操作文档进行文档节点的增加和删除

              1、创建节点:document.createElement() 参数为不区分大小写的标签名(对于HTML),对XML文档会区分大小写;第二种方法是复制已存在的节点,每个节点都有一个cloneNode()方法放回节点的副本;

              2、插入节点:使用Node的方法appendChild()和insertBefore();

                   appendChild():插入子节点使其成为节点的最后一个子节点;  

                   insertBefore():两个参数,第一个参数是待插入的节点,第二个参数是该父节点的子节点,可以为null,为null是功能与appendChild相同;

                    如果使用以上两个方法再次插入已经存在的节点,已存在节点将会自动从它的当前位置删除并在新的位置从新插入,可以用来做单页表格的排序等,不改变表格数据,只改变节点的顺序;

             3、删除和替换节点:删除节点:removeChild() 替换节点:replaceChild();

             4、节点容器DocumentFragment:var frag = document.createDocumentFragment(); 可以包含任意多子节点而且它使得一组节点被当做一个节点看待;

        6、HTML可编辑内容:有两种方法启用编辑功能,

            其一:设置任何标签的HTML contenteditable属性;<div id="editor" contenteditable>edit.....</div>

              其二:设置对应元素的JavaScript contenteditable属性;

            浏览器定义了多项文本编辑命令,为了执行这些命令,应该使用Document对象的execCommand()方法;  

  • 相关阅读:
    poj 1273 Drainage Ditches
    网络流之--混合图的欧拉回路 出自yzmduncan.iteye.com/blog/1149049
    hdu 2203 亲和串 kmp
    hdu 1711 kmp
    KMP算法详解 出自matrix67.com
    zoj 2016 Play on Words 欧拉回路
    修改document.domain的注意事项(转)
    ActiveXObject函数详解(转)
    angularjs
    sbt
  • 原文地址:https://www.cnblogs.com/liangblog/p/5973031.html
Copyright © 2020-2023  润新知