JS16

DOM 文档对象模型

        Document Object Model

        文档对象模型是w3c组织推荐的处理可扩展标志的标准编程接口

        分类

                1. HTMLDom 针对HTML文档的标准模型

                2. XMLDOM 针对XML文档的标准模型

        语句要求更加严密  （数据传输 跨平台）  Xhtml->html5

节点

        文档中的每一部分都是节点包括document元素 属性 文本 注释 等等

核心Dom 针对任何结构化文档的标准模型

        documentNode  ElementNode,  TextNode  AttributeNode

1、元素节点 　　Node.ELEMENT_NODE(1)

2、属性节点 　　Node.ATTRIBUTE_NODE(2)

3、文本节点 　　Node.TEXT_NODE(3)

4、CDATA节点 Node.CDATASECTIONNODE(4)

5、实体引用名称节点 　　Node.ENTRYREFERENCENODE(5)

6、实体名称节点 　　Node.ENTITY_NODE(6)

7、处理指令节点 　　Node.PROCESSINGINSTRUCTIONNODE(7)

8、注释节点 　 Node.COMMENT_NODE(8)

9、文档节点 　 Node.DOCUMENT_NODE(9)

10、文档类型节点 　　Node.DOCUMENTTYPENODE(10)

11、文档片段节点 　　Node.DOCUMENTFRAGMENTNODE(11)

12、DTD声明节点 Node.NOTATION_NODE(12)

HTMLDOM节点

1、document HTMLdocument文档

2、element 元素

3、attr 属性

4、CharacterData -- text 文本

        -- comment 注释

节点属性

1、nodeName 节点名字

2、nodeValue 节点值

3、nodeType 节点类型

获取文档元素方法

1、通过ID选取元素 document.getElementById();

         id属性可自动生成被脚本访问的全局变量 不推荐使用 --可读性 保留字

2、通过名字选取元素document.getElementsByName

        IE9以上和标准浏览器认为所有元素都有name

        IE9 以下认为只有个别元素有name 表单 img form

        document.elementname -->(form img iframe); --兼容

3、通过标签名选择器

        document.getElementsByTagName();

        element.getElementsByTagName();

4、通过css类选择器元素

        document.getElementsByClassName() --IE9以下不兼容

5、通过css选择器选择元素

        document.querySelector() 获取元素

        element.querySelector()

        document.querySelectorAll() 获取集合

        element.querySelectorAll()

6、document.all 获取所有元素的集合

文档结构

    节点的关系

        --父节点

        --子节点

        --兄弟节点

       --祖先节点

       --后代节点

    节点树

        childNodes 所有的子节点  length

        firstChild 第一个子节点

        lastChild  最后一个子节点

        previousSibling  上一个兄弟节点

        nextSibling      下一个兄弟节点

         parentNode 父节点  --只有element可以作为父节点(除了document顶级节点)

        var html = document.documentElement;

    元素树

        children        所有子元素集合

        firstElementChild  第一个子元素      IE9+

        lastElementChild    最后一个子元素    IE9+

        previousElementSibling  上一个兄弟元素  IE9+

        nextElementSibling  下一个兄弟元素    IE9+

        parentElement  父元素  --只有element可以作为父元素

        childElementCount  子元素的数量      IE9+

        ownerDocument      返回元素所属的文档对象

实例： 通过table中最后一td中的按钮获取第一个中的数值

属性

1、标准属性

         DOM元素映射HTML的属性(属性伴随元素存在)

2、非标准属性 (自定义属性)

         getAttribute(attr) --获取自定义或内置属性的值(属性需要存在)

        setAttribute(attr,value)  --设置自定义或内置属性

        hasAttribute()        --判断属性是否存在(自定义或内置)

        removeAttribute()    --删除自定义或内置属性

3、属性节点

        getAttributeNode(attr)        --获取属性节点

        setAttributeNode(s)            --设置属性节点

        创建属性

                var s = document.createAttribute(attrname);

        设置节点值：s.nodeValue=’attrvalue’;

        设置属性节点 box.setAttributeNode(s);

实例： 图片的延迟加载

HMLT5 data-*属性的使用

        使用 data-* 属性来嵌入自定义数据--IE10以上

console.log(this.dataset);