前端讲义31_ javascript访问HTML DOM常用方法

最新推荐文章于 2025-04-01 13:49:38 发布

木生火

最新推荐文章于 2025-04-01 13:49:38 发布

阅读量137

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/msh2016/article/details/90049187

版权

javascript 专栏收录该内容

22 篇文章

订阅专栏

HTML文档中的所有内容都是节点，整个文档是一个文档节点。
每个元素是元素节点，元素内的文本是文本节点，元素的属性是属性节点
举例

<html>
  <head>
    <meta charset="utf-8">
    <title>优快云教程</title>
  </head>
  <body>
    <h1>前端讲义</h1>

    <p id="info3" >第29讲:Javascript验证有效Email</p>
    <p id="info4" >第30讲:javascript转换JSON数据为对象</p>
    <p id="info5" >第31讲:访问HTMLDOM接口</p>

    <div id="main">
    <p id="info1" >第01讲:了解URL/p>
    <p id="info2" >第02讲:web应用设计新思考</p>
    </diV>

  
  </body>
</html>

<html> 节点没有父节点；它是根节点
<head> 节点和 <body>节点 的父节点是 <html> 节点
前端讲义 是文本节点 ，它的父节点是 <p> 节点
getElementById() 方法返回带有指定 ID 的元素

<script>
//返回带有指定 ID 的元素引用
var txt=document.getElementById("info1");
document.write("<p>段落文本为: " + txt.innerHTML + "</p>");
document.write("<p>"+"</p>");
	
//返回包含文档中所有 <p> 元素的列表
var  txtArray =document.getElementsByTagName("p");
document.write("第1段落: " + txtArray[0].innerHTML);
document.write("第2段落: " + txtArray[1].innerHTML);
document.write("<p></p>");
	
//返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代
var  txtArray1 =document.getElementById("main").getElementsByTagName("p");
document.write("第1段落: " + txtArray1[0].innerHTML);
document.write("第2段落: " + txtArray1[1].innerHTML);
document.write("<p>");
</script>

获取元素内容的最简单方法是使用 innerHTML 属性

一些 DOM 对象常用方法
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。