Dom总结

Dom总结

1.定义

文档对象模型 (DOM：Document Object Model) 是一个平台，一个中立于语言的应用程序编程接口 (API)，允许程序访问并更改文档的内容、结构和样式

2.HTMLDOM

1）DOM 是将 HTML 文档表达为树结构， 定义了访问和操作 HTML 文档的标准方法；
2）DOM 树：节点（node）的层次。文档节点（document）、元素节点、属性节点、文本节点；
3）DOM 把一个文档表示为一棵家谱树（父，子，兄弟）。

注：属性节点，文本节点与元素节点是父子关系，但他俩不是兄弟节点。

2.2

节点的基本属性

一般来说节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也不相同。

基本属性的作用

nodeType

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值,比如文本节点类型为3

nodeName

nodeName属性返回节点的名称

nodeValue

nodeValue属性返回或设置当前节点的值，格式为字符串

3 元素获取的四种方法

getElementById，返回拥有指定 id 的第一个元素
getElementsByTagName（返回一个包括所有给定标签名称的元素集合），getElementsByClassName（返回一个包含所有指定class名称的元素集合），getElementsByName（返回一个包含所有指定 name 属性的元素集合）

4元素节点的属性操作

4.1获取属性节点

元素对象[“属性名”]
元素对象.属性名
元素对象.getAttribute(“属性名”)；

4.2设置属性值

元素对象[”属性名”] = 值
元素对象.属性名 = 值
元素对象.setAttribute(“属性名”, 值)

// 获取、设置属性的值
            
            // 1、通过 元素对象.属性名
            console.log(divEle.id);
            divEle.id = "div";
            // 通过点的方式如果属性是class，需要使用 className 名字
            console.log(divEle.className);
            divEle.className = "熊大";
            // 如果属性中有短杠的符号组合，在调用的时候需要去掉短杠，然后使用驼峰命名的方式
            console.log(divEle.style.backgroundColor);
			divEle.style.backgroundColor="green";
			
            // 2、通过 元素对象[“属性名”]
            console.log(divEle["id"]);
            divEle["id"] = "div";
            // 如果属性是class，需要使用 className 名字
            console.log(divEle['className']);
            divEle['className'] = "bbb"
            // 如果属性中有短杠的符号组合,这2中方式都可以
            console.log(divEle['style']["backgroundColor"]);
            divEle['style']["backgroundColor"] = "red";
            console.log(divEle['style']["background-color"]);
            divEle['style']["background-color"] = "red";

            // 3、元素对象.getAttribute("属性名")
            var idValue = divEle.getAttribute("id"