前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >11Element对象

11Element对象

作者头像
Dreamy.TZK
发布2020-04-22 17:12:31
4620
发布2020-04-22 17:12:31
举报
文章被收录于专栏:小康的自留地

什么是Element对象

DOM的标准规范中提供了 Elementi对象,该对象提供了HTML页面中所有元素所具有的属性和方法。 DOM标准规范中提供了Node对象,主要是依靠DOM节点树结构访问和更新HTML页面的内容。 而DOM标准规范中提供了 Element对象,主要是依靠DOM元素树结构访问和更新HTML页面的内容。

定位元素

代码语言:javascript
复制
<div class='container'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
  1. getElementsByTagName var container = document.getElementsByClassName("container")[0] var elements = container.getElementsByTagName("div"); console.log(elements)
  1. getElementsByClassName var container = document.getElementsByClassName("container")[0] 通过此方法获取不存在空白节点问题
  2. querySelector var container = document.body var css1 = container.querySelector('.container') 可以包含一个或多个,但只返回第一个
image-20200421192155251
image-20200421192155251
  1. querySelectorAll 与上一个类似,返回全部

遍历元素

代码语言:javascript
复制
<div id="d">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
  1. 获取指定节点的所有子元素
  2. 获取指定元素的所有子元素的个数
  3. 获取指定节点的第一个子元素 存在空白节点问题。,如果没有子元素,则返回null
  4. 获取指定节点的最后一个子元素
代码语言:javascript
复制
var d = document.getElementById('d')
d.firstChild.nextSibling.textContent = '666'
// 获取指定节点的所有子元素
console.log('children:', d.children)
// 获取指定元素的所有子元素的个数
console.log("childElementCount", d.childElementCount)
// 获取指定节点的第一个子元素
console.log("firstChild", d.firstChild)
// 获取指定节点的最后一个子元素
console.log("lastElementChild", d.lastElementChild)
image-20200421192850453
image-20200421192850453
image-20200421192859851
image-20200421192859851
  1. 获取指定元素的前面相邻兄弟元素
  2. 获取指定元素的后面相邻兄弟元素
代码语言:javascript
复制
var d = document.getElementById('d')
// 获取下一个兄弟元素(获取到空白节点)
console.log(d.nextSibling)
// 获取到script脚本
console.log(d.nextSibling.nextSibling)
console.log(d.previousSibling)
console.log(d.previousSibling.previousSibling)

属性操作

代码语言:javascript
复制
<p id="p1" class="text">12312321</p>
  1. 获取 var pElement = document.getElementById('p1') console.log(pElement.getAttribute("class")) //返回text
  2. 设置 pElement.setAttribute("name", 'name_test') console.log(pElement.getAttribute('name'))
  3. 删除 pElement.setAttribute("name", 'name_test') pElement.removeAttribute('name') console.log(pElement.getAttribute('name')) 如果删除的属性不存在的话,不会引发任何异常
  4. 判断是否含有指定属性(是否含有指定属性,布尔值) console.log(pElement.hasAttribute("class"))
  5. 用于判断是否存在属性(存在属性即返回true) console.log(pElement.hasAttributes())

InnerHTML

可以直接添加HTML代码

代码语言:javascript
复制
var pElement = document.getElementById('p1')
pElement.innerHTML = '<span>test<span>'
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-04-21,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是Element对象
  • 定位元素
  • 遍历元素
  • 属性操作
  • InnerHTML
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档