JavaScript中Document对象介绍及代码示例
引言:
在JavaScript中,Document对象是代表整个HTML文档的接口,它提供了对HTML文档的访问和操作方法。本文将介绍Document对象的常用方法和属性,并提供一些具体的代码示例。
<html> <body> <h1 id="myHeading">Hello, World!</h1> <script> var heading = document.getElementById("myHeading"); heading.innerHTML = "Hello, JavaScript!"; </script> </body> </html>
在上述代码中,通过getElementById方法获取id为"myHeading"的元素节点,并使用innerHTML属性将其内容更改为"Hello, JavaScript!"。
<html> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> var listItems = document.getElementsByTagName("li"); for (var i = 0; i < listItems.length; i++) { listItems[i].style.color = "red"; } </script> </body> </html>
在上述代码中,通过getElementsByTagName方法获取所有li元素节点,并通过for循环将每个li元素的文本颜色更改为红色。
<html> <body> <div id="myDiv"></div> <script> var newElement = document.createElement("p"); newElement.innerHTML = "This is a new paragraph."; document.getElementById("myDiv").appendChild(newElement); </script> </body> </html>
在上述代码中,通过createElement方法创建了一个新的p元素节点,并使用appendChild方法将其添加到id为"myDiv"的div元素中。
总结:
本文介绍了JavaScript中Document对象的一些常用方法和属性,包括getElementById、getElementsByTagName、createElement和appendChild。通过这些方法和属性,可以方便地访问和操作HTML文档的元素节点。希望本文提供的代码示例对于学习和使用JavaScript的读者有所帮助。
以上是js中document对象介绍的详细内容。更多信息请关注PHP中文网其他相关文章!