HTML DOM 元素学习笔记
什么是HTML DOM元素？
- HTML DOM元素是HTML文档中的所有元素的对象表示。
- 通过HTML DOM，JavaScript可以访问和修改HTML文档中的所有HTML元素。
如何获取HTML DOM元素？
- 通过元素的ID获取：
document.getElementById(id) - 通过元素的标签名获取：
document.getElementsByTagName(name) - 通过元素的类名获取：
document.getElementsByClassName(name)
如何操作HTML DOM元素？
改变HTML内容
- 改变元素的innerHTML属性：
element.innerHTML = new html content - 改变元素的innerText属性：
element.innerText = new text content
改变HTML属性
- 改变元素的src属性（用于<img>元素）：
element.src = new url - 改变元素的href属性（用于<a>元素）：
element.href = new url - 改变元素的style属性：
element.style.property = new style
添加和删除HTML元素
- 创建新元素：
document.createElement(tagName) - 添加新元素：
parentElement.appendChild(newElement) - 删除子元素：
parentElement.removeChild(childElement)
实例
获取页面上的元素
htmlCopy Code<!DOCTYPE html>
<html>
<body>
<h1 id="myHeading">Hello World!</h1>
<script>
var header = document.getElementById("myHeading");
console.log(header.innerHTML);
</script>
</body>
</html>
改变元素的innerHTML
htmlCopy Code<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>
添加新元素
htmlCopy Code<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var para = document.createElement("P");
para.innerHTML = "New Element Added.";
document.body.appendChild(para);
}
</script>
</body>
</html>
以上是HTML DOM元素学习笔记的简单介绍和实例。