DOM总结(有后续)-CFANZ编程社区

1、什么是DOM?

文本对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言

(html或XML)的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构，样式。

2、获取元素

JS获取DOM元素的方法（8种）

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的
获取body的方法（document.body）
document.body是专门获取body这个标签的。

3、常见的事件基础

执行事件的步骤

1、获取事件源

2、注册事件（绑定事件）

3、添加事件处理程序（采取函数赋值形式）

4、操作元素

1、改变元素内容

IE非标准：innerText,不识别html标签

element.innerText = '文本’ 会覆盖原先的内容

element.innerHTML 获取的时候回去掉标签，空格

W3C标准innerHTML(推荐)识别html标签

element.innerText = '文本或标签’ 会覆盖元素之前的内容，修改的内容可以是文本也可以是标签

element.innerHTML 可以获取到元素的文本以及子标签，会保留空格，换行

2、常见元素的属性操作(可读取)

1、src属性（链接）

element.src = "链接地址"

2、href属性 (超链接)

element.href = " 链接地址"

3、title属性（提示）

element.title = "提示"

4、alt属性（提示）

element.alt = ''提示"

5、id属性（元素ID）

element.id = "id"

3、表单元素的属性操作（可读取）

1、type属性（类型）

input.type = "text" 改变表单的类型

2、name属性（名称）

input.name = "名称" 改变表单的name属性

3、value属性（文本内容）

input.value = "文本" 改变表单的文本内容

4、checked属性（选中）

input.checked = "true" 单选或者多选框被选中的样式

5、disabled 属性（禁用）

input.disabled = "true" 下拉列表框默认选中

4、样式属性操作（可读取）

1、行内样式操作

element.style.width = "200px" 样式去掉-采用驼峰命名法如:backgroundColor

2、类样式操作

element.className = "类名" 添加、修改类选择器；添加多个类名用空格隔开，

会覆盖之前的类选择器

5、节点属性

nodeType

DOM本质就是一堆节点的集合，由于包含不同类型的信息，所以就有不同类型的节点。接下来看nodeType。

元素节点，nodeType为1

属性节点，nodeType为2

文本节点，nodeType为3

文档节点，nodeType为9

Note：文档节点并不是根元素(html)，因为注释等内容可以出现在根元素之外。所以在构造DOM树时，根元素并不适合作为根节点，所以就出现了文档节点，而根节点作为文档节点的子节点。

<body>
		<p id="p">p标签的内容</p>
	</body>
	<script type="text/javascript">
		var element = document.getElementById('p');
		var text = document.getElementById('p').firstChild;
		var property = document.getElementById('p').getAttributeNode('id');
		console.log("元素节点nodeType返回值"+element.nodeType);	
		console.log("文本节点nodeType返回值"+text.nodeType);
		console.log("属性节点nodeType返回值"+property.nodeType);
		console.log("文档节点nodeType返回值"+document.nodeType);
	</script>

nodeName

对于元素节点，nodeName就是标签名。元素节点也可以通过tagName获取标签名。

对于文本节点，nodeName永远是#text

对于属性节点，nodeName是属性名称

对于文档节点，nodeName永远是#document

注意：

nodeName是一个只读属性，不能进行设置。

nodeName所包含的XML元素的标签名称永远是大写的。

<body>
		<p id="p">p标签的内容</p>
	</body>
	<script type="text/javascript">
			var element=document.getElementById("p");
		    var text=document.getElementById("p").firstChild;
		    var property=document.getElementById("p").getAttributeNode("id");
		    console.log("元素节点nodeName返回值"+element.nodeName);/*元素节点返回标签名P*/
		    console.log("文本节点nodeName返回值"+text.nodeName);/*文本节点永远返回#text*/
		    console.log("属性节点nodeName返回值"+property.nodeName);/*返回属性名，这里是id*/
		    console.log("文档节点nodeName返回值"+document.nodeName);
	</script>

nodeValue

对于元素节点，因为本身不直接包含文本，所以nodeValue是不可用的。

对于文本节点，nodeValue值为文本值

对于属性节点，nodeValue值为属性值

<body>
		<p id="p">p标签的内容</p>
	</body>
	<script type="text/javascript">
				var element=document.getElementById("p");
			    var text=document.getElementById("p").firstChild;
			    var property=document.getElementById("p").getAttributeNode("id");
			    console.log("元素节点nodeValue返回值"+element.nodeValue);
			    console.log("文本节点nodeValue返回值"+text.nodeValue);
			    console.log("属性节点nodeValue返回值"+property.nodeValue);
			    console.log("文档节点nodeValue返回值"+document.nodeValue);
	</script>

6、获取子节点

                    Children                            获取所有的元素子节点
                   ChildNodes                       获取所有的子节点
                   firstChild 获取第一个子节点
                   lastChild 获取最后一个子节点
                   firstElementChild 获取第一个子元素节点
                   lastElementChild 获取最后一个子元素节点

7、获取兄弟节点

                    nextSibling                        获取下一个兄弟节点
                   prevousSibling           获取上一个兄弟节点
                   nextElementChild                获取下一个兄弟元素节点
                   previousElemetSibling       获取上一个兄弟元素节点