JavaScript基础之HTML DOM的使用
HTML DOM是HTML Document Object Model(文档对象模型)的缩写，定义了通过JS访问和操作 HTML 文档的标准方法。
JS HTML DOM的使用
- HTML DOM 改变 HTML 内容
- 改变HTML 输出流
- 改变HTML 内容
- 改变HTML属性
- HTML DOM 改变 CSS
- 改变HTML元素样式
- HTML DOM 事件
- onclick 事件
- 使用HTML DOM来分配事件
- onmousedown、onmouseup 以及 onclick 事件
- HTML DOM EventListener
- 通过 addEventListener方法添加监听
- HTML DOM 元素的操作
- 创建新的 HTML 元素
- 删除已有的HTML元素
- 附录:
HTML DOM 改变 HTML 内容
改变HTML 输出流
- JavaScript 可用通过 document.write() 可用于直接向 HTML 输出流写内容
- 不要在文档加载完成后调用 document.write(), 会覆盖整个HTML 文档内容
改变HTML 内容
使用 innerHTML 方法来改变HTML元素内容：
document.getElementById(id).innerHTML=new HTML
改变HTML属性
- 语法：
document.getElementById(id).attribute=new value
- 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img id="image" src="https://www.w3cschool.cn//attachments/cover/cover_docker.png" width="160" height="120">
<script>
document.getElementById("image").src="https://www.w3cschool.cn/attachments/cover/cover_javascript.png";
</script>
<p>原图片为 cover_docker.png,脚本将图片修改为 cover_javascript.png</p>
</body>
</html>
HTML DOM 改变 CSS
改变HTML元素样式
- 语法
document.getElementById(id).style.property=new style
- 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id="helloId">Hello World</h1>
<button type="button" onclick="document.getElementById('helloId').style.color='blue'">
click me!</button>
</body>
</html>
HTML DOM 事件
onclick 事件
onclick=JavaScript
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click it!</h1>
</body>
</html>
使用HTML DOM来分配事件
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例：
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>
</body>
</html>
HTML DOM EventListener
通过 addEventListener方法添加监听
- 语法
element.addEventListener(event, function, useCapture);
– 第一个参数是事件的类型 (如 “click” 或 “mousedown”).
– 第二个参数是事件触发后调用的函数.
– 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的，默认值为false(冒泡).
* 冒泡:内部元素的事件会先被触发，然后再触发外部元素.
* 捕获: 外部元素的事件会先被触发，然后才会触发内部元素的事件.
- 实例
- 向原元素添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
</body>
- 在事件中传递参数
当传递参数值时，使用"匿名函数"调用带参数的函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
HTML DOM 元素的操作
DOM 节点有三个重要的属性，分别是：
- nodeName : 节点的名称
- nodeValue ：节点的值
- nodeType ：节点的类型
创建新的 HTML 元素
- 创建该元素（元素节点）
- 向一个已存在的元素追加该元素
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
删除已有的HTML元素
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
附录:
W3Cschool HTML DOM 教程