DOM(一)携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天。这篇文章主要讲了dom操作HT

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天

dom获取元素

1.通过id获取，document.getElementById（”字符串“）驼峰命名法，返回的是一个对象object

2.通过标签名，获得对象集合getElementsByIdTagName("li"),返回集合

3.element.getElementsByTagName()得到某个元素里面的某些标签

4.通过新增方法1，类名document.getElementsByClassName()

5.新增2，querySelector(".box")指定选择器的第一个元素对象

6.querySelectorAll(".box")指定选择器的所有元素对象

DOM对HTML操作

改变HTML内容

使用innerHTML属性

1.直接
<script>
document.getElementById("div1").innerHTML="替换后的文本显示处";
</script>
2.间接
<script>
var e=document.getElementById("header");
e.innerHTML="替换后的文本显示处";
</script>

改变HTML属性语法:获取元素+.要改变的元素属性+ 改变值

<body>

<img id="im" src="s.gif">

<script>
document.getElementById("im").src="s.jpg";
</script>

</body>

如上例
1.首先获取到了要改变属性的元素（这里只用了一种获取id的方法，其它亦可）
2.用.属性="改变后的属性值"改变HTML属性，即完成了整个操作

DOM对CSS操作

语法：document.getElementById(id).style.属性="新属性值"

//一个小练习（部分代码）
document.getElementById("div1").style.color="blue";

DOM事件

触发事件，执行代码
1.点击元素
2.页面加载
3.鼠标移入
4.表单提交 ....

1.点击事件

<h1 id="h">标题</h1>
<button type="button"
onclick="document.getElementById('h').style.color='red'">
点我!</button>

如上面代码可以看出，点击button按钮，h1文字颜色发生改变.这是在button上绑定了onclick点击事件。

也可以直接绑定在h1上

<h1 onclick="this.style.color='red'">点击文本</h1>

上面一段代码点击后颜色就会改变为红色

也可写在函数里

<!DOCTYPE html>
<html>
<head>
<script>
function change(i)
{
    i.style.color='red';
}
</script>
</head>
<body>
<h1 onclick="change(this)">点击文本!</h1>
</body>
</html>

2.onload事件

onload事件指的是加载时触发的事件，可以在body上用<body onload="fun()">
1.fun()是一个函数 2.在用户进入页面时会执行fun（）函数

3.onmouseover与onmouseout事件

鼠标移入与鼠标移出事件

<body>

<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" >over or out</div>
<script>
function mouseOver(obj){
	obj.innerHTML="移入"
}
function mouseOut(obj){
	obj.innerHTML="移出"
}
</script>

</body>

上面一串代码中onmouseover="mouseOver(this)" onmouseout="mouseOut(this)"两个函数分别对应了鼠标移入与鼠标移出的函数，当完成相应动态，则会执行相应的函数。