JavaScript：DOM-CSDN博客

本文链接：https://blog.csdn.net/zhxh1636/article/details/79332222

创建新的HTML元素

<div id="div1">

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的HTML元素

<div id="div1">
    <p id="p1">这是一个段落。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

查找HTML元素

通过id查找

getElementById(elementId: string): HTMLElement | null;

<p id="intro">hello world!</p>
var x = document.getElementById("intro");

通过标签名查找

getElementsByName(elementName: string): NodeListOf<HTMLElement>;

<p>hello world!</p>
var x = document.getElementsByTagName("p");

通过类名查找

getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;

<p class="intro">hello world!</p>
var x = document.getElementsByClassName("intro");

改变HTML

改变HTML内容

document.getElementById("p1").innerHTML="新文本!";

改变HTML属性

document.getElementById("image").src="landscape.jpg";

改变HTML样式

<p id="p1">Hello World!</p>
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontFamily="Arial";
document.getElementById("p1").style.fontSize="larger";

HTML事件

当用户点击鼠标时

<h1 onclick="this.innerHTML='clicked!'">点击文本!</h1>

当网页已加载时

<body onload="checkCookies()">

当输入字段被改变时

<input type="text" id="fname" onchange="upperCase()">

当鼠标移动到元素上时

<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>
<div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>

HTML监听

addEventListener()方法用于向指定元素添加事件句柄。
addEventListener()方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。

参数
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

element.addEventListener("click", function(){ alert("Hello World!"); });