DOM

HTML DOM

什么是 DOM？

DOM ( Document Object Model )

比喻：你种一棵小树，给每一片叶子做标志，然后从树根开始找到每一片唯一的叶子

1. 是 W3C（万维网联盟）的标准
2. 定义了访问 HTML 和 XML 文档的标准

标准被分为 3 个不同的部分

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

DOM 就是针对 HTML 和 XML 提供的一个API,document 是其的一个对象

为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素）

DOM 节点

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

DOM 有什么用

    // 返回文档(整个html结构)
    console.log('document', document);

    // 返回文档的根节点
    console.log('html', document.documentElement);

    // 返回文档的根节点
    console.log('body', document.body);

    // 返回当前文档中被击活的标签节点
    console.log(document.activeElement);

    //获取文档中id为test的元素的值
    console.log(document.getElementById('test-btn').innerHTML);

    //获取文档中name为btnName的元素 return 数组
    console.log(document.getElementsByName('btnName')[0].innerHTML);

    //获取文档中class为btn-click的元素 return 数组
    console.log(document.getElementsByClassName('btn-click')[0].innerHTML);

    //获取文档中标签为button的元素 return 数组
    console.log(document.getElementsByTagName('button')[1].innerHTML);

    // DOM属性
    /* 
        innerHTML       获取或改变任意 HTML 元素
        nodeName        获取节点的名称(只读)
        nodeValue       获取或改变节点的值 通过（element.childNodes[0].nodeValue）
        nodeType        获取节点的类型(只读) (1)元素, (2)属性, (3)文本, (8)注释, (9)文档
        attributes      获取元素属性的 NamedNodeMap。
        childNodes      获取元素子节点的 NodeList。
        className       获取设置元素的 class 属性。
        clientHeight    获取元素的可见高度。
        clientWidth     获取元素的可见宽度。
        offsetHeight    获取元素的高度。
        offsetWidth     获取元素的宽度。
        scrollHeight    获取元素的整体高度。
        scrollLeft      获取元素左边缘与视图之间的距离。
        scrollTop       获取元素上边缘与视图之间的距离。
        scrollWidth     获取元素的整体宽度。
        firstChild      获取元素的首个子。
        lastChild     获取元素的最后一个子元素。
        id           设置或获取元素的 id。  
     */
    console.log('innerHTML', document.getElementById('test-btn').innerHTML);
    console.log('nodeName', document.getElementById('test-btn').nodeName);
    console.log('nodeValue', document.getElementById('test-btn').childNodes[0].nodeValue);
    console.log('nodeType', document.getElementById('test-btn').nodeType);


    /*
        appendChild()       把新的子节点添加到指定节点。
        removeChild()       删除子节点。
        replaceChild()      替换子节点。
        insertBefore()      在指定的子节点前面插入新的子节点。
        createAttribute()   创建属性节点。
        createElement()     创建元素节点。
        createTextNode()    创建文本节点。
        getAttribute()      返回指定的属性值。
        setAttribute()      把指定属性设置或修改为指定的值。
     */