DOM

Posted 2020-11-12 aikang525

DOM：
概念：Document Object Model 文档对象模型
    将标记语言文档的各个组成部分，封装为对象，可以使用这些对象对标记语言文档进行CRUD的动态操作
w3c DOM标准被分为3个不同的部分：
    核心 DOM 针对任何结构化文档的标准模型
        Document：文档对象
            1.创建(获取)：window.document
            2.方法：
                1.获取Element对象：
                    1.getElementById()：通过id属性值获取元素对象
                    2.getElementsByTagName()：根据元素名称获取元素对象，返回数组
                    3.getElementsByClassName():根据class属性值获取元素的对象们
                    4.getElementsByName():根据name属性值获取元素对象们
                2.创建其他DOM对象：
                    1.createAttribute(name)
                    2.createComment()
                    3.createElement()
                    4.createTextNode()
        Element：元素对象
            1.获取:通过document获取或创建
            2.方法:
                1.removeAttribute():删除属性
                2.setAttribute():设置属性
        Attribute：属性对象
        Text：文本对象
        Comment：注释对象
        Node：节点对象，其他5个的父对象
            1.特点:所有dom对象都可以被认为是一个节点
            2.方法:
                CRUD dom树:
                    appendChild():向节点的子节点列表的结尾添加新的子节点
                    removeChild():删除(并返回)当前节点的指定子节点 href="javascript:void(0);"
                    replaceChild():用新节点替换一个子节点
            3.属性:
                parentNode 返回节点的父节点

    XML DOM 针对XML文档的标准模型
    html DOM 针对HTML 文档的标准模型:
        1.标签体的设置和获取:innerHTML
        2.使用HTML元素对象属性
        3.控制元素样式:
            1.使用元素的style属性来设置
                div1.onclick = function(){
                //修改样式
                div1.style.border = ...
                }
            2.提前定义好类选择器的样式,通过元素饿className的属性来设置其属性值