JavaScript DOM节点操作方法总结
什么是DOM？
DOM (Document Object Model) 文档对象模型，它是 HTML 和 XML 的编程接口。DOM 的出现使得编程人员可以通过脚本语言来对文档的内容和结构进行操作。
DOM 将文档的每个组成部分都看作是一种对象，使得编程人员可以对文档中的各个部分进行访问和操作。
常用的DOM节点操作方法
1. getElementById()
getElementById() 方法可返回对拥有指定 id 的第一个对象的引用。
示例：
<!DOCTYPE html>
<html>
<body>
<p id="demo">这是一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!"; // 修改段落内容
</script>
</body>
</html>
2. getElementsByTagName()
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
示例：
<!DOCTYPE html>
<html>
<body>
<p>点击按钮来显示段落：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo">这是一个段落。</p>
<script>
function myFunction() {
var x = document.getElementsByTagName("p");
x[1].innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
3. innerHTML
innerHTML 属性可返回或设置一个元素及其子元素的 HTML 内容。
示例：
<!DOCTYPE html>
<html>
<body>
<p>点击按钮来修改段落内容：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo">这是一个段落。</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
4. createElement()
createElement() 方法可创建一个新的元素节点。
示例：
<!DOCTYPE html>
<html>
<body>
<p>点击按钮来创建新的段落。</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction() {
var para = document.createElement("p");
var node = document.createTextNode("这是新段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
}
</script>
<div id="div1">
<p id="p1">这是段落。</p>
</div>
</body>
</html>
总结
以上就是常用的 DOM 节点操作方法，掌握这些方法能让我们在编写 JavaScript 代码时对网页中的结构和内容进行更加灵活的操作。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript DOM节点操作方法总结 - Python技术站
微信扫一扫 
支付宝扫一扫 