DOM《Element节点》

市民钟先生
105 阅读9分钟

概述

  • Element节点对象对应网页的HTML元素。每一个HTML元素，在DOM树上都会转化成一个Element节点对象。Element对象继承了Node接口，因此Node的属性和方法在Element对象都存在。
  • 不同的HTML元素对应的元素节点是不一样的，浏览器使用不同的构造函数生成不同的元素节点，比如<a>元素的构造函数是HTMLAnchorElement，<button>是HTMLButtonElement。因此元素节点不是一种对象，而是许多种对象。这些对象除了继承Element对象的属性和方法外，还有独自的属性和方法。

实例属性

id

  • 返回指定元素的id属性，可读写。
// HTML 代码为 <p id="foo">

var p = document.querySelector('p');
p.id // "foo"

tagName

  • 返回指定元素的大写标签名，与nodeName属性的值相等。
// HTML代码为
// <span id="myspan">Hello</span>

var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"

dir

  • 用于读写当前元素的文字方向，可能是从左到右（ltr），也可能是从右到左（rtl）。

accessKey

  • 用于读写分配给当前元素的快捷键。
// HTML 代码如下
// <button accesskey="h" id="btn">点击</button>

var btn = document.getElementById('btn');
btn.accessKey // "h"  btn元素的快捷键是h，按下Alt + h就能将焦点转移到它上面

draggable

  • 返回一个布尔值，表示当前元素是否可拖动。可读写。

lang

  • 返回当前元素的语言设置，可读写。
// HTML 代码如下
// <html lang="en">

document.documentElement.lang // "en"

tabIndex

  • 返回一个整数，表示当前元素在Tab键遍历时的顺序，可读写。

title

  • 用来读写当前元素的HTML属性title（鼠标悬浮时弹出的文字提示框）。

hidden

  • 用来控制当前元素是否可见，返回一个布尔值，表示当前HTML元素的hidden属性的值。可读写。
  • 此属性与CSS设置的是互相独立的，CSS的优先级高于Element.hidden，如果CSS指定了元素不可见或可见，那么此属性并不能更改该元素的实际可见性。

contentEditable

  • 用户可以在网页上编辑这个区块的内容。此属性返回一个字符串，表示是否设置了此属性，有三种值true、false、inherit。可读写。
<div id="box"></div>

document.getElementById('box').contentEditable = 'true' // 此div内容区域可编辑

isContentEditable

  • 返回一个布尔值，表示是否设置了contenteditable属性。只读。

attributes

  • 返回一个类数组，成员是当前元素节点的所有属性节点。

className

  • 用来读写当前元素节点的class属性，值是字符串，每个class之间用空格分割。
// HTML 代码 <div class="one two three" id="myDiv"></div>

var div = document.getElementById('myDiv');
div.className // "one two three"

classList

  • 返回一个类数组，当前元素节点的每个class就是这个对象的一个成员。
// HTML 代码 <div class="one two three" id="myDiv"></div>

var div = document.getElementById('myDiv');
div.classList
// {
//   0: "one"
//   1: "two"
//   2: "three"
//   length: 3
// }
  • classList有下列方法：
var div = document.getElementById('myDiv');

div.classList.add('myCssClass');  // 添加一个class
div.classList.add('foo', 'bar');  // 
div.classList.remove('myCssClass'); // 移除一个class
div.classList.toggle('myCssClass'); // myCssClass不存在就加入，否则移除
div.classList.contains('myCssClass'); // 是否包含，返回 true 或者 false
div.classList.item(0); // 返回第一个 Class
div.classList.toString(); // class列表转为字符串

dataset

  • 元素可以自定义data-属性，用来添加数据。
<article id="foo" data-columns="3" data-index-number="12314" data-parent="cars"></article>
  • Element.dataset属性返回一个对象，可以从这个对象读写data-属性。
var article = document.getElementById('foo');
article.dataset  // DOMStringMap {columns: '3', indexNumber: '12314', parent: 'cars'}
article.dataset.columns     // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent      // "cars"

innerHTML

  • 返回一个字符串，等同于该元素包含的所有HTML代码。可读写。
  • 如果插入的文本含有<script>标签，虽然可以生成<script>节点，但不会执行。
<div class="box" id="box"><span>Hello world</span></div>

document.getElementById('box').innerHTML // '<span>Hello world</span>'

document.getElementById('box').innerHTML = '1111'
// HTML结构：
<div class="box" id="box">1111</div>

outerHTML

  • 返回一个字符串，表示当前元素节点的所有HTML代码，包括该元素自身和所有子元素。可读写。
<div class="box" id="box"><span>Hello world</span></div>

document.getElementById('box').outerHTML // '<div class="box" id="box"><span>Hello world</span></div>'

document.getElementById('box').outerHTML = '1234'
// HTML结构：
"1234"
  • 如果一个节点没有父节点，设置outerHTML会报错。
var div = document.createElement('div');
div.outerHTML = '<p>test</p>'; // DOMException: This element has no parent node.

clientHeight，clientWidth

  • clientHeight：返回一个整数，表示元素节点的CSS高度（px），只对块级元素生效。行内元素返回0。如果块级元素没有设置CSS高度，则返回实际高度。包含元素自身高度 + padding - 水平滚动条高度。
  • clientWidth：与clientWidth一致。包含元素自身宽度 + padding - 垂直滚动条宽度。
// 返回当前视口的高度（浏览器窗口高度）
document.documentElement.clientHeight // 919 
// 网页实际高度
document.body.clientHeight // 21

clientLeft，clientTop

  • clientLeft：返回一个整数，表示元素节点左边框的宽度（px），不包括左侧的padding和margin。如果没有设置左边框或者是行内元素，则返回0。
  • clientTop：与clientLeft一致。表示元素节点顶部边框的宽度。

scrollHeight，scrollWidth

  • 返回一个整数，表示当前元素的总高、宽度。包含元素自身高、宽度 + 溢出部分 + padding - 水平、垂直滚动条高、宽度。此属性只读。

scrollLeft，scrollTop

  • 表示当前元素的水平、垂直滚动条向右、下滚动的距离（px）。对于那些没有滚动条的网页元素，这两个属性总是为0。可读写，如果是写，则会导致浏览器将当前元素自动滚动到相应的位置。
// 获取整个网页水平滚动距离
document.documentElement.scrollLeft  // 0

offsetParent

  • 返回最靠近当前元素的、并且CSS的position不等于static的上层元素。该属性主要用于确定子元素位置偏移的计算基准。如果此元素是display:none或fixed定位，则该属性返回null。

offsetHeight，offsetWidth

  • 返回一个整数，表示元素的CSS垂直、水平高度、宽度（px）。包含元素自身高度、宽度 + padding + border + 水平、垂直滚动条。此属性只读。如果元素不可见则返回0。

offsetLeft，offsetTop

  • 返回当前元素左上角相对于offsetParnet节点的水平、垂直位移（px）。

children

  • 返回一个类数组（HTMLCollection实例），包含当前元素节点的所有子元素节点。

childrenElementCount

  • 返回当前元素节点的子元素节点的个数。

firstElementChild

  • 返回当前元素节点的第一个元素子节点。如果没有则返回null。

lastElementChild

  • 返回当前元素节点的最后一个元素子节点，如果没有则返回null。

nextElementSibling

  • 返回当前元素节点的后一个同级元素节点，没有则返回null。

previousElementSibling

  • 返回当前元素节点的前一个同级元素节点，没有则返回null。

实例方法

querySelector()

  • 接受CSS选择器作为参数，返回父元素的第一个匹配的子元素。如果没有找到匹配的子元素，就返回null。

querySelectorAll()

  • 接受CSS选择器作为参数，返回一个NodeList实例。

getElementsByClassName()

  • 返回一个HTMLCollection实例，成员是当前元素节点的所有具有指定class的子元素节点。

getElementsByTagName()

  • 返回一个HTMLCollection实例，成员是当前节点的所有匹配指定标签名的子元素节点。

closest()

  • 接受一个CSS选择器作为参数，返回匹配该选择器的、最接近当前节点的一个祖先节点（包含自身）。如果没有则返回null。
// HTML 代码如下
// <article>
//   <div id="div-01">Here is div-01
//     <div id="div-02">Here is div-02
//       <div id="div-03">Here is div-03</div>
//     </div>
//   </div>
// </article>

var div03 = document.getElementById('div-03');

// div-03 最近的祖先节点
div03.closest("#div-02") // div-02
div03.closest("div div") // div-03  包括自身
div03.closest("article > div") //div-01
div03.closest(":not(div)") // article

matches()

  • 返回一个布尔值，表示当前元素是否匹配给定的CSS选择器。
<div class="box" id="box"></div>

document.getElementById('box').matches('.box') // true

scrollIntoView()

  • 滚动当前元素，进入浏览器的可见区域。接受一个布尔值作为参数，如果为true(默认)，表示元素的顶部与当前区域可见部分的顶部对齐。如果为false，表示元素的底部与当前区域的可见部分的尾部对齐。此方法生效的前提是当前区域可滚动。

getBoundingClientRect()

  • 返回一个对象，提供当前元素节点的大小、位置等信息。属性全部为只读。

  • 属性如下：

    • x：元素左上角相对于视口的横坐标
    • y：元素左上角相对于视口的纵坐标
    • height：元素高度（元素自身高度 + padding + border）
    • width：元素宽度（元素自身宽度 + padding + border）
    • left：元素左上角相对于视口的横坐标，与x属性相等
    • right：元素右边界相对于视口的横坐标（等于x + width）
    • top：元素顶部相对于视口的纵坐标，与y属性相等
    • bottom：元素底部相对于视口的纵坐标（等于y + height）

  • 由于元素相对于视口的位置会随着页面滚动而变化，因此表示位置的四个属性值都不是固定不变的。如果想要得到绝对位置，可以将left属性 + window.scrollX，top属性 + window.scrollY。

getClientRects()

  • 返回一个类数组，成员是当前元素在页面上形成的所有矩形。每个矩形都有bottom、height、left、right、top、width六个属性。表示它们相对于视口的四个坐标以及本身的高度和宽度。
  • 对于块级元素该方法返回的对象只有该元素一个成员。对于行内元素，该方法返回的对象有多少个成员取决于该元素在页面上占据多少行。
<div style="width: 20px;">
    <span id="inline">Hello World Hello World Hello World</span>
</div>

// div 20px的宽度把span分成了6行显示
var el = document.getElementById('inline');
el.getClientRects()  // DOMRectList {0: DOMRect, 1: DOMRect, 2: DOMRect, 3: DOMRect, 4: DOMRect, 5: DOMRect, length: 6}
el.getClientRects()[0] // DOMRect {x: 8, y: 8, width: 40.140625, height: 21, top: 8, …}

insertAdjacentElement()

  • 相对于当前元素的指定位置，插入一个新的节点。返回被插入的节点，如果插入失败返回null。两个参数，参数一表示插入的位置；参数二是要插入的节点。

  • 参数一：

    • beforebegin：当前元素之前。
    • afterend：当前元素之后。
    • afterbegin：当前元素内部的第一个子节点前面。
    • beforeend：当前元素内部的最后一个子节点后面。

insertAdjacentHTML()

  • 用于将一个HTML字符串，解析生成DOM结构，插入相对于当前节点的指定位置。两个参数，参数一表示插入的位置，与insertAjacentElement参数一一致；参数二是待解析的HTML字符串。
<div id="one">one</div>

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 执行后的 HTML 代码：
// <div id="one">one</div> <div id="two">two</div>

insertAdjacenText()

  • 相对于当前节点的指定位置，插入一个文本节点，用法与insertAdjacentHTML方法完全一致。

remove()

  • 继承自ChildNode接口，用于将当前元素节点从它的父节点移除。

focus()

  • 将当前页面的焦点转移到指定元素上。参数接受一个对象，参数对象的preventScroll属性是一个布尔值，表示是否将当前元素停留在原始位置，而不是滚动到可见区域。
// 让btn元素获得焦点，并滚动到可见区域。
 document.getElementById('btn').focus({preventScroll:false});

blur()

  • 将焦点从当前元素移除。

click()

  • 模拟一次点击事件。
avatar
文章
阅读
粉丝