HTML DOM 方法
方法 | 描述 |
---|---|
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
getElementById() 返回带有指定 ID 的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById() 返回带有指定 ID 的元素。</title>
</head>
<body>
<div id="myDiv">这是一个id=“myDiv”的div元素。</div>
<script>
var div = document.getElementById("myDiv");//获取id为“myDiv”的元素
alert(div.innerHTML);//用弹窗输出div元素的innerHTML属性值
</script>
</body>
</html>
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。</title>
</head>
<body>
<div>
<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
</div>
<div>
<h1>这是第一个标题</h1>
<h2>这是第二个标题</h2>
<h3>这是第三个标题</h3>
</div>
<script>
// 获取div元素
var divs = document.getElementsByTagName("div");
// 获取p元素
var ps = document.getElementsByTagName("p");
// 获取h1元素
var h1s = document.getElementsByTagName("h1");
// 获取h2元素
var h2s = document.getElementsByTagName("h2");
// 获取h3元素
var h3s = document.getElementsByTagName("h3");
// 在控制台中输出div元素
console.log(divs);
// 在控制台中输出p元素
console.log(ps);
// 在控制台中输出h1元素
console.log(h1s);
// 在控制台中输出h2元素
console.log(h2s);
// 在控制台中输出h3元素
console.log(h3s);
</script>
</body>
</html>
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。</title>
</head>
<body>
<div class="box">
<p class="p1">这是第一段clsss="p1"的文字.</p>
<p class="p2">这是第二段class="p2"的文字.</p>
<p class="p1">这是第三段class="p1"的文字.</p>
</div>
<script>
var div = document.getElementsByTagName("div")[0];//获取div元素
var p1 = div.getElementsByClassName("p1");//获取class="p1"的元素列表
var p2 = div.getElementsByClassName("p2");//获取class="p2"的元素列表
console.log(p1);//在控制台输出p1元素列表
console.log(p2);//在控制台输出p2元素列表
</script>
</body>
</html>
appendChild() 把新的子节点添加到指定节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>appendChild() 把新的子节点添加到指定节点。</title>
</head>
<body>
<div id="parent">
<p>这是第一段文字。</p>
<p>这是第二段文字</p>
</div>
<script>
var parent = document.getElementById("parent");//获取父节点
var newP = document.createElement("p");//创建新的p节点
newP.innerHTML = "这是新添加的段落。";//设置新节点的innerHTML属性
parent.appendChild(newP);//把新节点添加到父节点中
</script>
</body>
</html>
removeChild() 删除子节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeChild() 删除子节点。</title>
</head>
<body>
<div id="parent">
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</div>
<button onclick="remove()">移除“第2个"段落</button>
<script>
function remove() {
var parent = document.getElementById("parent");//获取父节点
var child = parent.childNodes[1];//获取第2个子节点
parent.removeChild(child);//删除第2个子节点
}
</script>
</body>
</html>
replaceChild() 替换子节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>replaceChild() 替换子节点。</title>
</head>
<body>
<div id="parent">
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</div>
<script>
var newP = document.createElement("p");//创建新的p标签
newP.innerHTML = "这是新的段落。";//设置新的p标签的innerHTML
var parent = document.getElementById("parent");//获取父元素
var oldP = parent.firstChild;//获取第一个子元素
parent.replaceChild(newP, oldP);//替换第一个子元素
</script>
</body>
</html>
insertBefore() 在指定的子节点前面插入新的子节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>insertBefore()在指定的子节点前面插入新的子节点。</title>
</head>
<body>
<div id="container">
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
</div>
<script>
var container = document.getElementById("container");
var newP = document.createElement("p");
newP.innerHTML = "新插入的段落";
container.insertBefore(newP, container.childNodes[1]);
</script>
</body>
</html>
createAttribute() 创建属性节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>createAttribute()方法创建属性节点。</title>
</head>
<body>
<div id="myDiv">
<p>这是一个段落。</p>
</div>
<script>
var div = document.getElementById("myDiv");//获取div元素
var newAttr = document.createAttribute("myAttribute");//创建属性节点
newAttr.value = "myValue";//设置属性值
div.setAttributeNode(newAttr);//添加属性节点到div元素
</script>
</body>
</html>
createElement() 创建元素节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>createElement() 创建元素节点。</title>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");//获取容器元素
var newDiv = document.createElement("div");//创建新元素
newDiv.innerHTML = "Hello World!";//设置新元素的innerHTML属性
container.appendChild(newDiv);//将新元素添加到容器中
</script>
</body>
</html>
createTextNode() 创建文本节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>createTextNode() 创建文本节点。</title>
</head>
<body>
<div id="container">
<p id="para1">这是第一段文字。</p>
<p id="para2">这是第二段文字</p>
</div>
<script>
var para1 = document.getElementById("para1");//获取元素
var para2 = document.getElementById("para2");//获取元素
var newText = document.createTextNode("这个是一个新的文本节点.");//创建文本节点
para1.appendChild(newText);//将新节点添加到para1元素的最后一个子节点之前
para2.insertBefore(newText, para2.firstChild);//将新节点添加到para2元素的第一个子节点之前
</script>
</body>
</html>
getAttribute() 返回指定的属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getAttribute() 返回指定的属性值。</title>
</head>
<body>
<div id="myDiv" class="myClass">这是一个div元素</div>
<script>
var div = document.getElementById("myDiv");// 获取div元素
var className = div.getAttribute("class");// 获取class属性值
var id = div.getAttribute("id");// 获取id属性值
console.log(className); // Output: "myClass"
console.log(id); // Output: "myDiv"
</script>
</body>
</html>
setAttribute() 把指定属性设置或修改为指定的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setAttribute() 把指定属性设置或修改为指定的值。</title>
</head>
<body>
<div id="myDiv">这是一个div元素</div>
<button onclick="changeColor()">改变颜色</button>
<script>
function changeColor() {
document.getElementById("myDiv").setAttribute("style", "color:red; background-color:yellow;");//设置或修改属性值
}
</script>
</body>
</html>
HTML DOM 属性
innerHTML 属性
获取 id="intro" 的 <p> 元素的 innerHTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取 id="intro" 的 <p> 元素的 innerHTML:</title>
</head>
<body>
<div id="intro">
<p>欢迎来到我的博客!</p>
<p>这里是一些关于我的信息。</p>
</div>
<script>
var intro = document.getElementById("intro");//获取 id="intro" 的元素
var p = intro.getElementsByTagName("p")[0];//获取 id="intro" 的第一个 <p> 元素
var pHtml = p.innerHTML;//获取 <p> 元素的 innerHTML
alert(pHtml);//弹出对话框显示 <p> 元素的 innerHTML
</script>
</body>
</html>
nodeValue 属性
取回 <p id="intro"> 标签的文本节点值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取回 <p id="intro"> 标签的文本节点值:</title>
</head>
<body>
<p id="intro">欢迎来到<span>我的博客</span>!</p>
<script>
var intro = document.getElementById("intro");//获取p标签的id属性值
var text = intro.textContent;//获取p标签的文本节点值
alert(text);//弹出文本节点值
</script>
</body>
</html>
nodeType 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nodeType 属性</title>
</head>
<body>
<div id="myDiv">
这是一个 div 元素
<p id="myParagraph">这是一个段落元素</p>
<span id="mySpan">这是一个 span 元素</span>
</div>
<script>
// 获取 div 元素
var myDiv = document.getElementById('myDiv');
console.log('myDiv 的 nodeType:', myDiv.nodeType); // 输出: 1 (元素节点)
// 获取段落元素
var myParagraph = document.getElementById('myParagraph');
console.log('myParagraph 的 nodeType:', myParagraph.nodeType); // 输出: 1 (元素节点)
// 获取 span 元素
var mySpan = document.getElementById('mySpan');
console.log('mySpan 的 nodeType:', mySpan.nodeType); // 输出: 1 (元素节点)
// 获取 div 内的文本节点(可能需要遍历子节点)
var textNode = null;
for (var i = 0; i < myDiv.childNodes.length; i++) {
if (myDiv.childNodes[i].nodeType === 3) { // 文本节点的 nodeType 是 3
textNode = myDiv.childNodes[i];
break;
}
}
if (textNode) {
console.log('textNode 的 nodeType:', textNode.nodeType); // 输出: 3 (文本节点)
} else {
console.log('没有找到文本节点');
}
</script>
</body>
</html>
HTML DOM 访问
getElementById() 方法
node.getElementById("id");返回带有指定 ID 的元素引用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById() 方法</title>
</head>
<body>
<p id="myP">这是一段文字</p>
<button onclick="changeColor()">改变颜色</button>
<script>
function changeColor() {
var p = document.getElementById("myP");//获取元素对象
p.style.color = "blue";//设置元素的颜色 blue
}
</script>
</body>
</html>
getElementsByTagName() 方法
node.getElementsByTagName("tagname");返回带有指定标签名的所有元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回包含文档中所有 <p> 元素的列表:</title>
</head>
<body>
<p>这是第一段p元素文字。</p>
<p>这是第二段p元素文字。</p>
<p>这是第三段p元素文字。</p>
<h1>返回包含文档中所有p元素的列表:</h1>
<script>
var paragraphs = document.getElementsByTagName("p");//获取所有p元素
var list = "";//定义一个空字符串,用于存储p元素的列表
for (var i = 0; i < paragraphs.length; i++) {
list += "<li>" + paragraphs[i].innerHTML + "</li>";//遍历所有p元素,将其内容添加到列表中
}
document.write("<ul>" + list + "</ul>");//将列表添加到页面中
</script>
</body>
</html>
HTML DOM - 修改
HTML DOM 创建 HTML 内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM 创建 HTML 内容</title>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");//获取容器元素
var newDiv = document.createElement("div");//创建新div元素
newDiv.innerHTML = "这是新添加的内容";//设置新div元素的innerHTML属性
container.appendChild(newDiv);//将新div元素添加到容器元素中
</script>
</body>
</html>
HTML DOM 改变 HTML 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM 改变 HTML 样式</title>
</head>
<body>
<h1 id="myH1">欢迎来到我的博客</h1>
<button onclick="changeStyle()">改变颜色和字体大小</button>
<script>
function changeStyle() {
var h1 = document.getElementById("myH1");//获取h1元素
h1.style.color = "red";//设置颜色为红色
h1.style.fontSize = "50px";//设置字体大小为30px
}
</script>
</body>
</html>
HTML DOM 创建新的 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM 创建新的 HTML 元素</title>
</head>
<body>
<div>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</div>
<script>
// 创建新的 HTML 元素
var newP = document.createElement("p");// 创建一个 <p> 元素
newP.innerHTML = "这是新创建的P元素的内容";// 设置内容
document.body.appendChild(newP);// 将新元素添加到 body 中
</script>
</body>
</html>
HTML DOM - 元素
创建新的 HTML 元素 - createElement() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建新的 HTML 元素 - createElement() 方法</title>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");//获取容器元素
var newElement = document.createElement("p");//创建新的 p 元素
newElement.innerHTML = "This is a new paragraph.";//设置新元素的innerHTML属性
container.appendChild(newElement);//将新元素添加到容器中
</script>
</body>
</html>
创建新的 HTML 元素 - insertBefore() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建新的 HTML 元素 - insertBefore() 方法</title>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");//获取容器元素
var newDiv = document.createElement("div");//创建新的 div 元素
newDiv.innerHTML = "这是新创建的 div 元素";//设置 div 元素的innerHTML属性
container.insertBefore(newDiv, container.firstChild);//在容器元素的最前面插入新的 div 元素
</script>
</body>
</html>
删除已有的 HTML 元素-removeChild()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除已有的 HTML 元素-removeChild()</title>
</head>
<body>
<div id="container">
<h1>欢迎来到我的博客</h1>
<p>这是第一个段落.</p>
<p>这是第二个段落.</p>
</div>
<script>
var container = document.getElementById("container");//获取容器元素container
container.removeChild(container.children[1]);//删除containe下的第二个子元素,即第二个段落
//container.innerHTML = "";//清空container元素的内容
</script>
</body>
</html>
替换 HTML 元素- replaceChild()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换 HTML 元素- replaceChild() </title>
</head>
<body>
<div id="container">
<p>这是第一个子元素</p>
<p> 这是第二个子元素 </p>
</div>
<script>
var container = document.getElementById("container");//获取容器元素
var newElement = document.createElement("h1");//创建新元素
newElement.innerHTML = "这是替换后的新元素";//设置新元素的innerHTML属性
container.replaceChild(newElement, container.childNodes[1]);//用新元素替换第二个子元素
</script>
</body>
</html>
HTML DOM - 事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
HTML DOM -当用户点击鼠标时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM -当用户点击鼠标时</title>
</head>
<body>
<div id="myDiv">
<p>欢迎访问我的网站!</p>
<p>点击我试试!</p>
<p>点击我试试!</p>
</div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", function() {
alert("你点击了我的div!");
});
</script>
</body>
</html>
HTML DOM -当网页已加载时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM -当网页已加载时</title>
</head>
<body>
<div id="myDiv">
<p>这是一个段落。</p>
</div>
<script>
// 页面已加载时执行的 JavaScript 代码
document.getElementById("myDiv").innerHTML = "这是一个新的段落。";
// 或者使用addEventListener()方法添加事件监听器
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("myDiv").innerHTML = "这是一个新的段落。";
});
</script>
</body>
</html>
HTML DOM -当图片已加载时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM -当图片已加载时</title>
</head>
<body>
<img id="myImg" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="Mountains" width="500" height="300">
<script>
var img = document.getElementById("myImg");//获取图片元素
img.addEventListener("load", function() {
alert("图片加载完成");//当图片加载完成时,弹出提示框
});
</script>
</body>
</html>
HTML DOM -当鼠标移动到元素上时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM -当鼠标移动到元素上时</title>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 200px; background-color: red;">
<p>这是
<span id="mySpan">一个span元素</span>
</p>
</div>
<script>
var myDiv = document.getElementById("myDiv");//获取div元素
var mySpan = document.getElementById("mySpan");//获取span元素
myDiv.addEventListener("mouseover", function(event) {
mySpan.innerHTML = "鼠标移入div元素!";//鼠标移入div元素时,将span元素的innerHTML设置为"Mouse over!"
});
myDiv.addEventListener("mouseout", function(event) {
mySpan.innerHTML = "鼠标移出div元素!";//鼠标移出div元素时,将span元素的innerHTML设置为"a span"
});
</script>
</body>
</html>
HTML DOM -当输入字段被改变时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM -当输入字段被改变时</title>
</head>
<body>
<form>
<label for="input">输入框:</label>
<input type="text" id="input" onchange="changeInput()">
</form>
<p id="result"></p>
<script>
function changeInput() {
var input = document.getElementById("input");
var result = document.getElementById("result");
result.innerHTML = "你输入的内容是:" + input.value;
}
</script>
</body>
</html>
HTML DOM -当 HTML 表单被提交时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM -当 HTML 表单被提交时</title>
</head>
<body>
<form id="myForm" action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Submit">
</form>
<script>
var form = document.getElementById("myForm");// 获取表单
form.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止默认提交行为
var name = document.getElementById("name").value;// 获取表单数据
var email = document.getElementById("email").value;// 获取表单数据
var message = document.getElementById("message").value;// 获取表单数据
// 发送数据到服务器
var xhr = new XMLHttpRequest();// 创建 XMLHttpRequest 对象
xhr.open("POST", "submit.php", true);// 设置请求方式和 URL
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// 设置请求头
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {//readyState 属性表示请求/响应过程的当前状态:4表示响应完成,status属性表示响应的HTTP状态码:200表示成功
alert("提交成功!");// 提示提交成功
}
}
xhr.send("name=" + name + "&email=" + email + "&message=" + message);// 发送数据
});
</script>
</body>
</html>
HTML DOM -当用户触发按键时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM -当用户触发按键时</title>
</head>
<body>
<input type="text" id="input1">
+
<input type="text" id="input2">
<button onclick="add()">等于</button>
<script>
function add() {
var input1 = document.getElementById("input1").value;//获取输入框的值
var input2 = document.getElementById("input2").value;//获取输入框的值
var result = parseInt(input1) + parseInt(input2);//将输入框的值转换为数字并相加
document.getElementById("input1").value = "";//清空输入框的值
document.getElementById("input2").value = "";//清空输入框的值
document.getElementById("input1").focus();//将焦点移到第一个输入框
alert("相加结果是: " + result);//弹出提示框显示结果
}
document.getElementById("input1").addEventListener("keydown", function(event) {
if (event.keyCode == 13) {
add();
}
});
</script>
</body>
</html>