登录    关于
马育民老师的博客

马育民的博客

QQ:65242847

JavaScript教程:document对象和访问标签对象

document

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

document树

HTML DOM 模型被结构化为对象树:

特点

  1. document 管理所有的 HTML 文档内容
  2. document 是树型结构,有层级关系
  3. 把所有的标签 都 对象化
  4. 通过 document 访问所有的标签对象

访问标签对象

注意: 下面方法 要在页面加载完成之后执行,否则无法获取标签对象

getElementById( elementId ) (最常用)

通过标签的 id 属性 查找标签 dom 对象

<input type="text" id="username" value="李雷"><br>
<script>
    var username = document.getElementById("username");
    console.log(username.value)
</script>

getElementsByName( elementName )

通过标签的 name 属性 查找标签 dom 对象

由于 html 标签的 name 属性可以同名,所以通过 该方法 返回的是 数组

<input type="text" name="like" value="吃鸡"><br>
<input type="text" name="like" value="原神"><br>

<script>
    var likes = document.getElementsByName("like");
    console.log(likes.length)
    console.log(likes[0].value)
    console.log(likes[1].value)
</script>

getElementsByTagName( tagname )(最少用)

通过 标签名 查找标签 dom 对象

因为 在html页面中,同名标签太多,所以通过该方法 返回的是 数组。并且,很有可能获取一些不想要的标签,所以使用最少

<input type="text" name="like" value="吃鸡"><br>
<input type="text" name="like" value="原神"><br>

<script>
    var likes = document.getElementsByTagName("input");
    console.log(likes.length)
    console.log(likes[0].value)
    console.log(likes[1].value)
</script>

原文出处:https://malaoshi.top/show_1IX1HsNXg8yt.html