通过DOM（Document Object Model）文档对象模型，JavaScript 可访问 HTML 文档的所有元素，并且动态的操作HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找HTML元素
如果我们需要通过JavaScript操作HTML元素，通常我们要先查找HTML元素。
- 通过 id 找到 HTML 元素，最简单的查找方式，返回找到的元素，找不到则返回null。
var element = document.getElementById('myId');
- 通过标签名找到 HTML 元素，根据标签名查找HTML元素，返回的是 htmlcollection 类型对象。
var elements = document.getElementsByTagName('div');
- 通过类名找到 HTML 元素，根据class属性名称查找HTML元素，返回结果和getElementsByTagName
var elements = document.getElementsByClassName('my-class');
动态改变HTML内容
HTML DOM允许我们动态的改变HTML，这也是我们使用DOM模型的原因之一。
- 改变HTML内容，使用innerHTML属性可以改变HTML元素，使用innerText属性改变HTML显示的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="myId" onclick="changeHTML()">点我改变我的内容</div>
<script>
function changeHTML(){
var el = document.getElementById('myId');
el.innerHTML = '<h1>改变之后的内容</h1>';
}
</script>
</body>
</html>
相比innerHTML来说，innerText只是显示改变的内容，而不会解析语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="myId" onclick="changeText()">点我改变我的内容</div>
<script>
function changeText(){
var el = document.getElementById('myId');
el.innerText = '改变之后的内容';
}
</script>
</body>
</html>
- 改变HTML属性，改变HTML属性可以使用
element.attribute=新属性值，或者element.setAttribute("class","类名");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.my-class{
font-size: 32px;
color: red;
}
</style>
</head>
<body>
<div id="myId" onclick="changeAttr()">点我改变我的class属性</div>
<script>
function changeAttr(){
var el = document.getElementById('myId');
el.className = 'my-class';
//el.className = 'my-class my-class2';//这里也可以添加多个已定义的类，注意不要被覆盖
}
</script>
</body>
</html>
为了添加多个类名，又不被覆盖，可以使用element.classList.add('class')的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.my-class{
font-size: 32px;
color: red;
}
.my-class2{
background: #f0f;
}
</style>
</head>
<body>
<div id="myId" onclick="changeAttr()">点我改变我的class属性</div>
<script>
function changeAttr(){
var el = document.getElementById('myId');
el.classList.add('my-class');
el.classList.add('my-class2');//追加类名不会被覆盖
}
</script>
</body>
</html>
动态改变CSS样式
除了可以操作HTML属性和内容，DOM也可以操作CSS样式。
- 使用
element.style.属性名 = '属性值'，或者element.setAttribute("style","样式");方式设置样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="myId" onclick="changeStyle()">点我改变我的样式属性</div>
<script>
function changeStyle(){
var el = document.getElementById('myId');
el.style.color = 'red';
el.style.fontSize = '36px';//使用驼峰属性名
el.style['background-color'] = 'aqua';//使用[*-*]属性名
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="myId" onclick="changeStyle()">点我改变我的style属性</div>
<script>
function changeStyle(){
var el = document.getElementById('myId');
el.setAttribute('style','color:red;font-size:36px');
}
</script>
</body>
</html>
这两种方法都会把原有的样式覆盖掉，推荐还是使用修改HTML class属性的方法间接修改样式好。
网友评论