原生JS DOM 重点知识笔记（第一期）

尽管现在的主流写法是mvvm框架，尽量避免了对dom 的直接操作，但是在javasript中对DOM操作依然是重点并且无法保证在今后的工作和学习中不涉及到此类技术（除非jQuery真的没有任何应用场景了）

一、获取元素

通过元素的ID,标签名字,类名获取，注意区分大小写
1. getElementById(“miantiao”)

<div id="miantiao">
	内容
</div>

使用方法：

document.getElementById("miantiao");

注：ment后面没有s，因为id是唯一值生效。

2. getElementsByTagName(“标签名”)

能获取这个标签的所有个体并返回一个数组，如果把标签名换成" * "就能够查看页面中的所有元素节点的个数用（".length"）。

3. getElementsByClassName(“class名”)
不需要代"."符号，此方法可以指定同时拥有多个类名的元素，中间用空格隔开，注意是元素不是多个类。
（例）

getElementsByClassName("class1  class2")

1. 获取方法：getAttribute(“属性名”)
注：不属于document对象，需用元素节点调用这个方法。
（例）

var a = document.getElementByTagName("p");//获取P元素的数组
var b = a[0].getAttribute("title");//获取第一个p元素的title值

注：如果页面中没有p元素，则将返回null。

2. 获取方法：setAttribute(“属性名”,“属性值”)

var a = getElementById("miantiao");
a.setAttribute("title1","title2");

注1：如果原来没有title属性，则会自动生成一个title属性并赋值。

注2：setAttribute所做的修改不会反映在浏览器上（查看源代码），因为先加载文档的静态内容，JS是后面的动态刷新部分，所以不会改变静态效果。

注3：非DOM解决方案

getElementById("miantiap").title="title2";

<div onclick="function1(this)">;//this参数指向本身
</div>

如果不想触发元素本身的行为如a元素，可以这样：

<div onclick="function1(this);return false;">;//this参数指向本身
</div>

1. 获取父元素的所有子元素 “childNodes”

（例）查看body里面的所有子元素个数

document.getElementsByTagName("body").childNodes.length;

2. 查看元素属性"nodeType"
当使用childNodes查出所有元素后可以判断出此元素的属性".nodeType",此方法将返回12种值，其中有3种是有实用价值的。

3. 改变文本的值"nodeValue"

<p id="a">面条</p>

注：文本是另外一种节点，所有要改变文本的值需要找到父元素再设置：

var title2 = "面条加油";
var a = getElementById("miantiao");
a.childNodes[0].nodeValue = title2;//假设p是里面的第一个子元素，用[0]

4. 对象检测（向后兼容）
可以检测浏览器是否支持此方法（例）：

if(document.getElementById)
	alert("支持");
else
	alert("不支持");

注1：方法后面不能加"( )"，不然就变成了方法的结果。
注2：方法检测需要写在实现的前面，不然就失去了检测的意义

4. 代码压缩工具

后排提示: 本系列知识点部分摘自《JavaScript DOM 编程艺术》（第二版）一书