浏览器加载网页的时候，会创建网页的文档对象模型（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=新的内容
例如:
<html>
<body>
<p id=”test”></p>
<script>
document.getElementById(“test”).innerHTML=”hello world”;
</script>
</body>
</html>
3.改变标签的属性
document.getELementById(id).attribute=新的值
例如：
<html>
<body>
<img id=”test” src=”1.png”>
<script>
document.getElementById(“test”).src=”2.png”;
</script>
</body>
</html>
4.改变标签的样式
document.getElementById(id).style.property=新值
例如：
<html>
<body>
<p id="test">Hello World!</p>
<script>
document.getElementById("test").style.color="red";
</script>
</body>
</html>
5.响应事件
HTML 事件是发生在 HTML 元素上的事情。使用js可以来响应这些事件
如何往元素上添加事件属性：
格式一、
<标签名字 事件属性="js代码">
例如：
<button onclick=”this.innerHTML=’hello world’”></button>
例如：
<h1 id=”a”>hello</h1>
<button onclick=”test()”>确定</button>
<script>
function test(){
document.getElementById(“a”).innerHTML=’world’;
}
</script>
格式二、
document.getElementById(id).事件属性=function(){函数内容}
例如：
<h1 id=”a”>hello</h1>
<button>确定</button>
<script>
document.getElementById(“a”).onclick=function(){
document.getElementById(“a”).innerHTML=’world’;
};
</script>
常见的事件属性
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);
例：
<p id="p1">这是第一个段落</p>
<p id="p2">这是第二个段落</p>
<script>
var p=document.createElement("p");
var node=document.createTextNode("这是新增段落。");
p.appendChild(node);
var element=document.getElementById("p1");
element.appendChild(p);
</script>
（2）删除：
方法一：
找到父节点
var parent = document.getElementById(id);
找到需要删除的标签
var child = document.getElementById(id);
从父节点中删除子标签
parent.removeChild(child);
方法二：
找到需要删除的标签
var child = document.getElementById(id);
child.parentNode.removeChild(child);
网友评论