浏览器的Element - 属性

干倒鱼皮
88 阅读2分钟

Element

浏览器的 Elemnet 元素是重要的页面布局成分，在继承关系上，它分继承了EventTarget、Node这两个class。

image.png

属性

基础信息相关

  1. Element.id
  2. Element.tagName
  3. Element.attributes Read only
  4. Element.classList Read only
  5. Element.className

attributes 是获取全部属性的集合。element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。classList可以使用 add()、remove()、replace() 和 toggle() 方法修改其关联

const div = document.createElement('div');
div.className = 'foo';

// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// 添加或移除多个类值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// 使用展开语法添加或移除多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");

位置相关

备注： 下面的属性拿到了取舍后的int数值，如果需要更加精确的小数点数据，需要使用到方法Element.getBoundingClientRect().

  1. Element.clientHeight Read only
  2. Element.clientWidth Read only

测量长度 = padding + content。 如果是css设置inline模式，高度和宽度为0， 在滚动区域是指视图高度和宽度，不包含xy滚动条

image.png

  1. Element.clientTop Read only
  2. Element.clientLeft Read only

分别指边框border的顶部和左边大小 如果是rtl，clientleft应该包括垂直滚动条的宽度

image.png

image.png

image.png

参考： javascript - 详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景 - 个人文章 - SegmentFault 思否

  1. scrollHeight
  2. scrollWidth

scrollHeight 和 scrollWidth 分别代表在xy滚动区域的全部高度和宽度，包括可见区域和不可见区域。在元素不可滚动时，它们的值等于clientHeight和clientWidth。此外也不包括滚动条区域. image.png

  1. scrollTop
  2. scrollLeft

scrollTop 和 scrollLeft 分别表示x在滚动区域的元素，可见区域到滚动顶部和左侧的距离，包括padding的

子元素相关

  1. firstElementChild
  2. lastElementChild
  3. children
  4. childElementCount
  5. previousElementSibling

children 是获取当前元素的子元素集合；previousElementSibling 是获取当前元素在父元素位置的上一个兄弟元素。

元素html修改相关

  1. innerHTML
  2. outerHTML

这个两个都是返回和设置字符串形式的元素html，区别是innerhtml只是返回内部子元素的html字符串

// HTML:
/*
<div id="d">
    <p>Content</p>
    <p>Further Elaborated</p>
</div>
*/

const d = document.getElementById("d");
console.log(d.outerHTML);

/*
    字符串 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
    被显示到控制台窗口
*/


// 注意：
let p = document.getElementsByTagName("p")[0];
console.log(p.nodeName);
// 显示："P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";

console.log(p.nodeName);
// 仍然为："P";

// p不再是文档树的一部分，新段替换了它。  (不在页面中显示，但仍然在内存中)

Web compement 相关

  1. slot
  2. shadowRoot

挖坑，后面看 Web compement部分

avatar
文章
阅读
粉丝