前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Web API - DOM 第一节(获取元素)

Web API - DOM 第一节(获取元素)

作者头像
meowrain
发布2021-04-22 16:03:43
发布2021-04-22 16:03:43
79200
代码可运行
举报
文章被收录于专栏:MeowRain的博客MeowRain的博客
运行总次数:0
代码可运行

Web API - DOM

DOM简介

文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口。

通过DOM接口,可以改变网页的内容,结构和样式

DOM树


文档:一个页面就是一个文档,DOM中使用document表示

元素:页面中所有的标签都是元素,DOM中使用element表示

节点:网页中的所有内容都是节点(标签,属性,文本,注释等),DOM中使用node表示

DOM把以上内容都看作对象


获取元素

如何获取页面元素

  • 根据ID获取
  • 根据标签名获取
  • 用过H5新增的方法获取
  • 特殊元素获取
根据ID获取

使用 getElementById获取带有ID的元素对象

Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

语法
代码语言:javascript
代码运行次数:0
运行
复制
var element = document.getElementById(id);

注:

  • element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
  • id是大小写敏感的字符串,代表了所要查找的元素的唯一ID.

实例:

代码语言:javascript
代码运行次数:0
运行
复制
    <div id="time">2019</div>
<script>
var time = document.getElementById('time');
console.log(time);
</script>

返回:


根据标签名获取

使用 document.getElementsByTagName可以返回带有制定标签名的对象的集合

实例:

代码语言:javascript
代码运行次数:0
运行
复制
<ul>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
</ul>
<script>
 var tag = document.getElementsByTagName('li');
 console.log(tag);
</script>

返回:

返回的是获取过来元素对象的集合,以伪数组的形式存储的 也就是说我们可以通过提取数组元素的方法得到其中一个元素的内容。


例如: console.log(tag[0]); 通过这个,我们可以得到第一个元素的内容:猫狗鼠鱼 如下图:

通过遍历的方式依次打印其中的元素

如果我们想依次打印里面的元素,可以使用遍历的方式:

代码语言:javascript
代码运行次数:0
运行
复制
 for(var i = 0 ;i < tag.length;i++){
     console.log(tag[i]);
 }

得到:

得到元素里面的某些标签

element.getElementsByTagName()


如图,我们有两组ul

通过代码:

代码语言:javascript
代码运行次数:0
运行
复制
<ul>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
</ul>
<ul id="nav">
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
</ul>
<script>
var nav = document.getElementById('nav');
  navs =   nav.getElementsByTagName('li')
console.log(navs);
</script>

解释:

输出:


通过HTML新增方法获取元素
document.getElementsByClassName('类名')

document.getElementsByClassName('类名') //根据类名返回元素对象集合

实例:

代码语言:javascript
代码运行次数:0
运行
复制
<p class="new">你好</p>
<script>
var saying = document.getElementsByClassName('new');
console.log(saying);
</script>

返回:

document.querySelector('选择器') //根据指定选择器返回第一个元素对象

document.querySelector('选择器') //根据指定选择器返回第一个元素对象*

实例:

代码语言:javascript
代码运行次数:0
运行
复制
var firstSaying = document.querySelector('.new');
console.log(firstSaying);

说明: 使用 document.querySelector('选择器') 可以直接自动判断选择器类型, .类名class选择器 #类名id选择器 其它形式示例:

返回:


document.querySelectorAll() 返回指定选择器的所有元素对象集合

实例:

代码语言:javascript
代码运行次数:0
运行
复制
var allNav =  document.querySelectorAll('nav');
console.log(allNav);

返回:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年02月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Web API - DOM
    • DOM简介
    • DOM树
  • 获取元素
    • 如何获取页面元素
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档