JavaScript —— DOM

阳光穿透心脏的1/2处 2022-03-11 10:10 221阅读 0赞

1.  概念：Document Object Model 文档对象模型  
    \* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。  
    \* DOM 将 HTML 文档表达为树结构，称为DOM树。
    
    1.  什么是DOM？
        
         *  DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
         *  W3C DOM 标准被分为 3 个不同的部分：
            
             *  核心 DOM - 针对任何结构化文档的标准模型
                
                 *  Document 文档对象
                 *  Element 元素对象
                 *  Attribute 属性对象
                 *  Text 文本对象
                 *  Comment 注释对象
                 *  Note 节点对象。是其他5个对象的父对象
             *  XML DOM - 针对 XML 文档的标准模型
             *  HTML DOM - 针对 HTML 文档的标准模型。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
                
                 *  HTML 的标准对象模型
                 *  HTML 的标准编程接口
                 *  W3C 标准
    2.  核心 DOM 模型
        
         *  Note 节点对象。是其他5个对象的父对象
            
            1.  特点：所有dom对象都可以被认为是一个节点
            2.  方法
                
                 *  CRUD dom数
                    
                    1.  appendChild() 向节点的子节点列表的结尾添加新的子节点。
                    2.  removeChild() 删除（并返回）当前节点的指定子节点。
                    3.  replaceChild() 用新节点替换一个子节点。
            3.  属性
         *  Document 文档对象
            
            1.  创建（获取）：在html dom模型中，可以使用window对象获取
                
                1.  window.document
                2.  document
            2.  方法
                
                1.  获取Element对象
                    
                    1.  getElementById() 根据id属性值，获取元素对象。id属性值一般唯一。
                    2.  getElementsByTagName() 根据元素名称，获取所有具有该名称的元素对象。返回值是一个数组
                    3.  getElementsByClassName() 根据class属性值，获取所有class属性与指定值相同的元素对象。返回值是一个数组
                    4.  getElementsByName() 根据name属性值，获取所有name属性与指定值相同的元素对象。返回值是一个数组
                2.  创建其他DOM对象
                    
                    1.  createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象。
                    2.  createComment() 创建注释节点。
                    3.  createElement() 创建元素节点。
                    4.  createTextNode() 创建文本节点。
            3.  属性
                
                 *  parentNode 返回节点的父节点。
         *  Element 元素对象
            
            1.  获取和创建：通过document来获取和创建
            2.  方法
                
                1.  removeAttribute() 删除属性
                2.  setAttribute() 设置属性
    3.  HTML DOM
        
        1.  标签体的设置和获取：innerHTML
        2.  使用HTML元素对象的属性
        3.  控制样式
            
            1.  使用元素的style属性设置。（style是所有标签都有的属性。）  
                // 修改样式方式1。style是所有标签都有的属性。  
                // .style. 可以获取css的属性  
                div1.style.border = “1px solid red”;  
                div1.style.width = “200px”;
                
                // font-size --> fontSize  
                div1.style.fontSize = “30px”;
            2.  提亲定义好类选择器的样式，通过元素的 className 属性来设置其class属性值。  
                // css代码
                
                // js代码