JS学习笔记（六）DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

1、查找 HTML 元素

1）通过 id 找到 HTML 元素
语法：document.getElementById(“id”)
功能：返回对拥有指定ID的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值

查找 id=“intro” 元素：

var x=document.getElementById("intro");

2）通过标签名找到 HTML 元素
语法：document.getElementByTagName(“tag”)
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称

本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有 p元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3）通过类名找到 HTML 元素
通过 getElementsByClassName 函数来查找 class=“intro” 的元素：

var x=document.getElementsByClassName("intro");

2、设置元素样式

语法：ele.style.styleName=styleValue
功能：设置ele元素的CSS样式
说明：
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称
3、styleValue为设置的样式值
4、若styleName为减号连接的形式时，要转换为驼峰形式

document.getElementById("p2").style.color="blue";

3、获取和改变HTML

1）innerHTML
语法：ele.innerHTML
功能：返回ele元素开始和结束标签之间的HTML

语法：ele.innerHTML=“html”
功能：设置ele元素开始和结束标签之间的HTML内容为html

2）className
语法：ele.className
功能：返回ele元素的class属性

语法：ele.className=“cls”
功能：设置ele元素的class属性为cls

4、获取和设置属性

1）获取属性
语法：ele.getAttribute(“attribute”)
功能：获取ele元素的attribute属性
说明：
1、ele是要操作的DOM对象
2、attribute是要获取的html属性，对于html自带的属性，如id、type等，可以直接用ele.id的形式获取，对于自定义属性如"data-type"，则应ele.getAttribute(“data-type”)

2）设置属性
语法：ele.setAttribute(“attribute”,value)
功能：在ele元素上设置属性
说明：
1、attribute为要设置的属性名称
2、value为设置的attribute属性的值

ele.setAttribute("data-color","red");

3）删除属性
语法：ele.removeAttribute(“attribute”)

4、DOM事件

1）HTML事件
直接在HTML元素标签内添加事件，执行脚本。
语法：

<tag 事件=“执行脚本”></tag>

<button onclick="func(this)">现在的时间是?</button>
<script>
function func(btn){//btn接收this，即DOM对象
btn.style.background="#f00";
}
</script>

说明：在事件触发的函数中，this是对该DOM对象的引用

2）DOM0级事件
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以使一个匿名函数，也可以是一个函数的调用

匿名函数写法：

函数调用写法：

不建议使用HTML事件的原因：
1、多元素绑定相同事件时，效率低；
2、不建议在HTML元素中写JavaScript代码