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

Element 对象

作者头像
RiemannHypothesis
发布2022-10-31 11:43:00
1.6K0
发布2022-10-31 11:43:00
举报
文章被收录于专栏:ElixirElixir

Element对象

Element对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)。

实例属性

Element.id

Element.id属性返回指定元素的id属性,该属性可读写。

代码语言:javascript
复制
// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"
Element.tagName

Element.tagName属性返回指定元素的大写标签名

代码语言:javascript
复制
// HTML代码为
// <span id="myspan">Hello</span>
var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"
Element.className,Element.classList

className属性用来读写当前元素节点的class属性。它的值是一个字符串,每个class之间用空格分割。

classList属性返回一个类似数组的对象,当前元素节点的每个class就是这个对象的一个成员。

代码语言:javascript
复制
// HTML 代码 <div class="one two three" id="myDiv"></div>
var div = document.getElementById('myDiv');

div.className
// "one two three"

div.classList
// {
//   0: "one"
//   1: "two"
//   2: "three"
//   length: 3
// }

上面代码中,className属性返回一个空格分隔的字符串,而classList属性指向一个类似数组的对象,该对象的length属性(只读)返回当前元素的class数量。

classList对象有下列方法。

add():增加一个 class。 remove():移除一个 class。 contains():检查当前元素是否包含某个 class。

代码语言:javascript
复制
var div = document.getElementById('myDiv');

div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.contains('myCssClass'); // 返回 true 或者 false
Element.innerHTML

Element.innerHTML属性返回一个字符串,等同于该元素包含的所有 HTML 代码。该属性可读写,常用来设置某个节点的内容。它能改写所有元素节点的内容,包括<HTML><body>元素。

如果将innerHTML属性设为空,等于删除所有它包含的所有节点。

代码语言:javascript
复制
el.innerHTML = '';
Element.innerText

Element.innerText与Element.innerHTML类似,但是如果写入的内容是标签则识别为字符串

Element.clientHeight,Element.clientWidth

Element.clientHeight属性返回一个整数值,表示元素节点的 CSS 高度(单位像素),只对块级元素生效,对于行内元素返回0。如果块级元素没有设置 CSS 高度,则返回实际高度。

除了元素本身的高度,它还包括padding部分,但是不包括border、margin。

Element.clientWidth属性返回元素节点的 CSS 宽度,同样只对块级元素有效,也是只包括元素本身的宽度和padding

document.documentElement的clientHeight属性,返回当前视口的高度(即浏览器窗口的高度),

document.body的高度则是网页的实际高度。

代码语言:javascript
复制
// 视口高度
document.documentElement.clientHeight

// 网页总高度
document.body.clientHeight
Element.scrollHeight,Element.scrollWidth

Element.scrollHeight属性返回一个整数值,表示当前元素的总高度(单位像素),包括溢出容器、当前不可见的部分。

Element.scrollWidth属性表示当前元素的总宽度(单位像素),其他地方都与scrollHeight属性类似。这两个属性只读。

整张网页的总高度可以从document.documentElement或document.body上读取。

代码语言:javascript
复制
// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight
Element.scrollLeft,Element.scrollTop

Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量,Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素,这两个属性总是等于0。

如果要查看整张网页的水平的和垂直的滚动距离,要从document.documentElement元素上读取。

代码语言:javascript
复制
document.documentElement.scrollLeft
document.documentElement.scrollTop
Element.offsetLeft,Element.offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移,Element.offsetTop返回垂直位移,单位为像素。通常,这两个值是指相对于父节点的位移。

下面的代码可以算出元素左上角相对于整张网页的坐标。

代码语言:javascript
复制
function getElementPosition(e) {
  var x = 0;
  var y = 0;
  while (e !== null)  {
    x += e.offsetLeft;
    y += e.offsetTop;
    e = e.offsetParent;
  }
  return {x: x, y: y};
}

实例方法

Element.getAttribute()

Element.getAttribute方法接受一个字符串作为参数,返回同名属性的值。如果没有该属性,则返回null。

代码语言:javascript
复制
var mydiv = document.getElementById('mydiv');
var id = mydiv.getAttribute('id');
Element.setAttribute()

Element.setAttribute方法用于为当前节点设置属性。如果属性已经存在,将更新属性值,否则将添加该属性。该方法没有返回值。

Element.removeAttribute()

Element.removeAttribute方法移除指定属性。该方法没有返回值。

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Element对象
    • 实例属性
      • Element.id
      • Element.tagName
      • Element.className,Element.classList
      • Element.innerHTML
      • Element.innerText
      • Element.clientHeight,Element.clientWidth
      • Element.scrollHeight,Element.scrollWidth
      • Element.scrollLeft,Element.scrollTop
      • Element.offsetLeft,Element.offsetTop
    • 实例方法
      • Element.getAttribute()
      • Element.setAttribute()
      • Element.removeAttribute()
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com