Element节点

原文地址：https://wangdoc.com/javascript/
Element节点对象对应网页的HTML元素。每个HTML元素，在DOM树上会转成一个Element节点对象（以下简称元素节点）。
元素节点的nodeType属性都是1。

var p = document.querySelector("p");
p.nodeName // "p"
p.nodeType // 1

Element继承了Node接口，因此Node的属性和方法在Element对象都存在。此外，不同的HTML元素对应的元素节点不一样的，浏览器使用不同的构造函数，生成不同的元素节点，比如<a>元素节点对象由HTMLAnchorElement构造函数生成。因此，元素节点不是一种对象，而是一组对象，这些对象除了继承Element的属性和方法，还有各自构造函数的属性和方法。

实例属性

元素特性的相关属性

（1）Element.id
Element.id属性返回指定元素的id属性，该属性可读写。

// HTML 代码为 <p id="foo">
var p = document.querySelector("p");
p.id // "foo"

注意，id属性的值是大小写敏感的。
（2）Element.tagName
Element.tagName属性返回指定元素的大写标签名，与nodeName属性的值相等。
（3）Element.dir
Element.dir属性用于读写当前元素的文字方向，可能是从左到右（"ltr"），也可能是从右到左（"rtl"）。
（4）Element.accessKey
Element.accessKey属性用于读写分配给当前元素的快捷键。

// HTML 代码如下
// <button accesskey="h" id="btn">点击</button>

var btn = document.getElementById("btn");
btn.accessKey // "h"

上面代码中，btn元素的快捷键是h，按下Alt + h就能将焦点转移到它上面。
（5）Element.draggable
Element.draggable属性返回一个布尔值，表示当前元素是否可拖动，该属性可读写。
（6）Element.lang
Element.lang属性返回当前元素的语言设置。该属性可读写。

// HTML 代码如下
// <html lang="en">
document.documentElement.lang // "en"

（7）Element.tabIndex
Element.tabIndex属性返回一个整数，表示当前元素在Tab键遍历时的顺序。该属性可读写。
tabIndex属性值如果是负值（通常是-1），则Tab键不会遍历到该元素。如果是正整数，则按照顺序，从小到大遍历。如果两个元素的tabIndex属性的正整数值相同，则按照出现的顺序遍历。遍历完所有tabIndex为正整数的元素以后，再遍历所有tabIndex等于0、或者属性值是非法值、或者没有tabIndex属性的元素，顺序为它们在网页中出现的顺序。
（8）Element.title
Element.title属性用来读写当前元素的HTML属性title。该属性通常用来指定，鼠标悬浮时弹出的文字提示框。

元素状态的相关属性

（1）Element.hidden
Element.hidden属性返回一个布尔值，表示当前元素的hidden属性，用来控制当前元素是否可见。该属性可读写。

var btn = document.getElementById("btn");
var myDiv = document.getElementById("mydiv");

btn.addEventListener("click", function () {
    myDiv.hidden = !myDiv.hidden;
}, false);

注意，该属性与CSS设置是相互独立的。CSS对这个元素可见性的设置，Element.hidden并不能反映出来。也就是说，这个属性不能用来判断当前元素的实际可见性。
CSS的设置高于Element.hidden。如果CSS指定了该元素不可见（display:none）或可见，那么Element.hidden并不能改变该元素实际的可见性。换言之，这个属性只在CSS没有明确设定当前元素的可见性时才有效。
（2）Element.contentEditable，Element.isContentEditable
HTML元素可以设置contentEditable属性，使得元素的内容可以编辑。

<div contenteditable>123<div>

上面代码中，<div>元素有contenteditable属性，因此用户可以在网页上编辑这个区块的内容。
Element.contentEditable属性返回一个字符串，表示是否设置了contenteditable属性，有三种可能值。该属性可写。

  • "true"：元素内容可编辑
  • "false"：元素内容不可编辑
  • "inherit"：元素是否可编辑，继承了父元素的设置
    Element.isContentEditable属性返回一个布尔值，同样表示是否设置了contenteditable属性。该属性只读。

Element.attributes

Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点，详见《属性的操作》一章。

var p = document.querySelector("p");
var attrs = p.attributes;

for (var i = attrs.length - 1; i >= 0; i--) {
    console.log(attrs[i].name + "->" + attrs[i].value);
}

上面代码遍历p元素所有属性。

Element.className，Element.classList

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。
classList属性返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。

// 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
  • toggle()：将某个class移入或移出当前元素（如果指定的class存在则移除，不存在则加入）
  • item()：返回指定索引位置的class
  • toString()：将class的列表转为字符串
    比较一下，className和classList在添加和删除某个class时的写法。
var foo = document.getElementById("foo");

// Add
foo.className += "bold";
foo.classList.add("bold");

// remove
foo.classList.remove("bold");
foo.className = foo.className.replace(/^bold$/, "");

toggle方法可以接受一个布尔值作为第二个参数。如果为true，则添加该属性；如果为false，则移除该属性。

Element.dataset

网页元素可以自定义data-属性，用来添加数据。

<div data-timestamp="1522907809292"></div>

上面代码中，<div>元素有一个自定义的data-timestamp属性，用来为该元素添加一个时间戳。
Element.dataset属性返回一个对象，可以从这个对象读写data-属性。
注意，dataset上面的各个属性返回都是字符串。
HTML代码中，data-属性的属性名，只能包含英文字母、数字、连词线（-）、点（.）、冒号（:和下划线（_）。它们转成JavaScript对应的dataset属性名，规则如下：

  • 开头的data-会省略。
  • 如果连词线后面跟了一个英文字母，那么连词线会取消，该字母变成大写。
  • 其他字符不变
    因此，data-abc-def对应abcDef，data-abc-2对应abc-2。
    除了使用dataset读写data-属性，也可以使用Element.getAttribute()和Element.setAttribute()，通过完整的属性名读写这些属性。

Element.innerHTML

Element.innerHTML返回一个字符串，等同于该元素包含的所有HTML代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。
如果就innerHTML属性设为空，等于删除它所有包含的节点。
注意，读取属性值得时候，如果文本节点包含&、小于号<和大于号>，innerHTML会将它们转为实体形式。如果想得到原文，建议使用element.textContent属性。
写入的时候，如果插入的文本包含HTML标签，会被解析成为节点对象插入DOM。注意，如果文本中含有<script>标签，虽然可以生成script节点，但是插入的代码不会执行。但是，innerHTML还有安全风险，可见上篇。

Element.outerHTML

Element.outerHTML属性返回一个字符串，表示当前元素节点的所有HTML代码，包括该元素本身和所有子元素。该属性可读写，对它进行赋值，等于替换掉当前元素。注意，如果一个节点没有父节点，设置outerHTML属性会报错。

Element.clientHeight，Element.clientWidth

Element.clientHeight属性返回一个整数值，表示元素节点的CSS高度（单位像素），只对块级元素生效，对行内元素返回0。如果块级元素没有设置CSS高度，则返回实际高度。
除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去滚动条的高度。注意，这个值始终是整数，如果小数会被四舍五入。
Element.clientWidth属性返回元素节点的CSS高度，同样只对块级元素有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度。

Element.clientLeft，Element.clientTop

Element.clientLeft属性等于元素节点左边框（left border）的宽度（单位像素），不包括左侧的padding和margin。如果没有设置左边框，或者行内元素（display:inline），该属性总是返回整数值，如果是小数，四舍五入。
Element.clientTop属性等于网页元素顶部边框的高度，其他特点与clientLeft相同。

Element.scrollHeight，Element.scrollWidth

Element.scrollHeight属性返回一个整数值（小数四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的元素。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有），还包括伪元素（::before或::after）的高度。
Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。这两个属性只读。

Element.scrollLeft，Element.scrollTop

Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。
如果要查看整张网页水平和垂直滚动条的滚动距离，是要从document.documentElement元素上读取。

Element.offsetParent

Element.offsetParent属性返回最靠近当前元素的、并且CSS的position属性不等于static的上层元素。

<div style="position: absolute;">
    <p>
        <span>Hello</span>
    </p>
</div>

上面代码中，span元素的offsetParent属性就是div元素。
该属性主要用于确定子元素位置偏移的计算基准，Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。
如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则offsetParent属性返回null。
如果某个元素的所有上层节点的position属性都是static，则Element.offsetParent属性指向<body>元素。

Element.offsetHeight，Element.offsetWidth

Element.offsetHeight属性返回一个整数，表示元素的CSS垂直高度。包括元素本身的高度、padding和border，以及水平滚动条的高度。
Element.offsetWidth属性表示元素的CSS水平宽度。
这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度和宽度。

Element.offsetLeft，Element.offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位像素。通常这两个值是指相对于父节点的位移。
下面的代码可以算出元素左上角相对于整张网页的坐标。

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.style

每个元素节点都有style用来读写该元素的行内样式信息，具体介绍参见《CSS操作》一章。

Element.children，Element.childElementCount

Element.children属性返回一个类似数组的对象（HTMLCollection实例），包括当前元素节点的所有子元素。如果当前元素没有子元素，则返回的对象包含零个成员。

if (para.children.length) {
    var children = para.children;
    for (var i = 0; i < children.length; i++) {
        // ...
    }
}

这个属性与Node.childNodes属性的区别是，它只包括元素类型的子节点，不包括其他类型的子节点。
Element.childElementCount属性返回当前元素节点包含的子元素节点个数，与Element.children.length的值相同。

Element.firstElementChild，Element.lastElementChild

Element.firstElementChild属性返回当前元素的第一个元素子节点，Element.lastElementChild返回最后一个元素子节点。如果没有元素子节点，这两个属性返回null。

Element.nextElementSibling，Element.previousElementSibling

Element.nextElementSibling属性返回当前元素节点的后一个同级元素节点，如果没有则返回null。
Element.previousElementSibling属性返回当前元素节点的前一个同级元素节点，如果没有则返回null。

实例方法

属性相关方法

元素节点提供六个方法，用来操作属性。

  • getAttribute()：读取某个属性的值
  • getAttributeNames()：返回当前元素的所有属性名
  • setAttribute()：写入属性值
  • hasAttribute()：某个属性是否存在
  • hasAttributes()：当前元素是否有属性
  • removeAttribute()：删除属性

Element.querySelector()

Element.querySelector方法接受一个CSS选择器作为参数，返回父元素的第一个匹配的子元素。如果没找到匹配的子元素，就返回null。注意这个方法无法选中伪元素。
需要注意的是，浏览器执行querySelector方法时，是先在全局范围内搜索给定的CSS选择器，返回过滤出哪些属于当前元素的子元素。因此会有一些违反直觉的结果，下面是一段HTML代码。

<div>
    <blockquote id="outer">
        <p>Hello</p>
        <div id="inner">
            <p>World</p>
        </div>
    </blockquote>
</div>

那么像下面这样查询的话，实际返回的是一个p元素，而不是第二个。

var outer = document.getElementById("outer");
outer.querySelector("div p");

Element.querySelectorAll()

Element.querySelectorAll方法接受CSS选择器作为参数，返回一个NodeList实例，包含所有匹配的子元素。机制和Element.querySelector相同。如果选择器里面有伪元素的选择器，则总是返回一个空的NodeList实例。

Element.getElementsByClassName()

Element.getElementsByClassName方法返回一个HTMLCollection实例，成员是当前元素节点的所有具有指定class的子元素节点。该方法大小写敏感。这个方法使用时，需要注意HTMLCollection实例是一个活的集合。

Element.getElementsByTagName()

Element.getElementsByTagName方法返回一个HTMLCollection实例，成员是当前节点的所有匹配指定标签名的子元素节点。该方法大小写不敏感。

Element.closest()

Element.closest方法接受一个CSS选择器作为参数，返回匹配改选择器的、最接近当前节点的一个祖先节点（包括当前节点本身）。如果没有任何节点匹配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

Element.matches()

Element.matches方法返回一个布尔值，表示当前元素是否匹配给定的CSS选择器。

事件相关方法

以下三个方法与Element节点的事件相关。这些方法都继承自EventTarget接口，详见相关章节。

  • Element.addEventListener()：添加事件的回调函数
  • Element.removeEventListener()：移除事件监听函数
  • Element.dispatchEvent()：触发事件

Element.scrollIntoView()

Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域，类似于设置window.location.hash的效果。

e1.scrollIntoView(); // e1.scrollIntoView(true)
e1.scrollIntoView(false);

该方法接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分尾部对齐（前提是当前区域可滚动）。默认为true。

Element.getBoundingClientRect()

Element.getBoundingClientRect方法返回一个对象，提供当前元素节点的大小、位置等信息。基本上就是CSS盒状模型的所有信息。该方法返回的rect对象具有以下属性（全部只读）。

  • x：元素左上角相对视口的横坐标
  • y：元素左上角相对于视口的纵坐标
  • height：元素高度
  • width：元素宽度
  • left：元素左上角相对于视口的横坐标，与x属性相等
  • right：元素右边界相当于视口的横坐标（等于x + width）
  • top：元素顶部相对于视口的纵坐标，与y属性相等
  • bottom：元素底部相对于视口的纵坐标（等于y + height）
    注意，getBoundingClientRect方法的所有属性，都把边框（border属性）算作元素的一部分。也就是说，从边框外缘的各个点来计算。

Element.getClientRects()

Element.getClientRects返回一个类似数组对象，里面是当前元素在页面上形成的所有矩形。对于盒状元素（比如<div>和<p>），该方法返回的对象只有该元素一个成员。对于行内元素（比如<span>），该对象返回对象有多少成员取决于该元素在页面上占据多少行。

Element.insertAdjacentElement()

Element.insertAdjacentElement方法在相对于当前元素的指定位置插入一个新的节点。该方法返回被插入的节点。如果插入失败，返回null。

element.insertAdjacentElement(position, element);

position取值：

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

注意，beforebegin和afterend这两个值，只在当前节点有父节点时才会生效。如果当前节点是由脚本创建的，没有父节点，那么插入会失败。

Element.insertAdjacentHTML()，Element.insertAdjacentText()

Element.insertAdjacentHTML方法用于将一个HTML字符串，解析生成DOM结构，插入相对于当前节点的指定位置。

element.insertAdjacentHTML(position, text);

position取值同上。
该方法只是在现有的DOM结构里面插入节点，这使得它的执行速度比innerHTML方法快得多。
注意，该方法不会转义HTML字符串，这导致它不能用来插入用户输入的内容，否则有安全风险。
Element.insertAdjacentText方法在相对于当前节点的指定位置，插入一个文本节点，用法与Element.insertAdjacentHTML方法完全一致。

Element.remove()

Element.remove方法继承自ChildNode接口，用于将当前元素节点从它的父节点移除。

Element.focus()，Element.blur()

Element.focus方法将当前页面焦点转移到指定元素上。
该方法接受一个对象作为参数。参数对象的preventScroll属性是一个布尔值，指定是否将当前元素停留在原始位置，而不是滚动到可见区域。

function getFocus() {
    document.getElementById("btn").focus({preventScroll: false});
}

Element.blur方法用于将焦点从当前元素移除。

Element.click()

Element.click方法用于在当前元素上模拟一次鼠标点击，相当于触发click事件。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chris-jichen/p/10286693.html