七、DOM文档对象模型

浏览器加载网页的时候，会创建网页的文档对象模型（document object model  DOM）,也叫对象的树。

  *通过文档对象，js可以改变网页标签的内容

  *改变标签属性

  *改变样式

  *响应事件

1.通过文档对象获取页面中元素

(1)通过id获取

document.getELementById(id)

(2)通过标签名获取

document.getElementsByTagName(tagname)

(2)通过类名来获取

document.getElementByClassName(classname)

注意：

  通过标签和类名获取的是一个元素数组，可以通过索引值来获取某个元素

2.修改标签的内容

使用innerHTML属性改变元素内容

document.getElementById(id).innerHTML=新的内容

例如:

3.改变标签的属性

document.getELementById(id).attribute=新的值

例如：

4.改变标签的样式

document.getElementById(id).style.property=新值

例如：

Hello World!

5.响应事件

HTML 事件是发生在 HTML 元素上的事情。使用js可以来响应这些事件

如何往元素上添加事件属性：

格式一、

<标签名字 事件属性="js代码">

例如：

例如：

hello

确定

格式二、

document.getElementById(id).事件属性=function(){函数内容}

例如：

hello

确定

常见的事件属性

onmouseover 鼠标移动到标签范围内

onmouseout 鼠标移出标签范围

onmousedown 鼠标按下

onmouseup 松开鼠标

6.添加和删除节点

（1）添加：

创建新元素：

var p = document.createElement("p");

创建文本节点：

var text = document.createTextNode("欢迎来到我的世界");

元素上添加文本节点：

p.appendChild(text);

把新元素添加到某个已经存在的元素后面：

var old = document.getElementById(id);

old.appendChild(p);

例：

这是第一个段落

这是第二个段落

（2）删除：

方法一：

找到父节点

var parent = document.getElementById(id);

找到需要删除的标签

var child = document.getElementById(id);

从父节点中删除子标签

parent.removeChild(child);

方法二：

找到需要删除的标签

var child = document.getElementById(id);

child.parentNode.removeChild(child);