(88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点

时间 2019-11-08

标签 wangdao.com wangdao com 第二十一天 1天 javascript 元素节点 element 栏目 JavaScript 繁體版

原文原文链接

Element 节点（元素节点）node

是一组对象数组

对应网页的 HTML 元素浏览器

每个 HTML 元素，在 DOM 树上都会转化成一个 Element 节点对象（如下简称元素节点）安全

全部元素节点的 nodeType 属性都是 1函数

浏览器使用不一样的构造函数，生成不一样的元素节点，有各自构造函数的属性和方法spa

<a> 元素的节点对象由 HTMLAnchorElement 构造函数生成
<button> 元素的节点对象由 HTMLButtonElement 构造函数生成

元素特性的相关属性
- Element.id
  - - 指定元素的id属性，该属性可读写，

- Element.tagName
  - - 指定元素的大写标签名，大小写敏感

- Element.dir
  - - 用于读写当前元素的文字方向 ltr 或者 rtl

- Element.accessKey
  - 用于读写分配给当前元素的快捷键
  - ```
  // HTML 代码以下
  // <button accesskey="h" id="btn">点击</button>
  var btn = document.getElementById('btn');
  btn.accessKey     // "h"
```
  上面代码中，btn元素的快捷键是h，按下 Alt + h 就能将焦点转移到它上面code

- Element.draggable
  - 返回一个布尔值，表示当前元素是否可拖动。该属性可读写

- Element.lang
  - 返回当前元素的语言设置。该属性可读写

- Element.tabIndex
  - 返回一个整数，表示当前元素在 Tab 键遍历时的顺序。该属性可读写。
    - 若是是负值（一般是-1），则 Tab 键不会遍历到该元素。
    - 若是是正整数，则按照顺序，从小到大遍历。
    - 若是两个元素的 tabIndex 属性的正整数值相同，则按照出现的顺序遍历。
  - 遍历完全部 tabIndex 为正整数的元素之后，再遍历全部 tabIndex 等于0、或者属性值是非法值、或者没有 tabIndex 属性的元素，顺序为它们在网页中出现的顺序

- Element.title
  - 用来读写当前元素的 HTML 属性 title。
  - 指定鼠标悬浮时弹出的文字提示框

元素状态的相关属性
- Element.hidden
  - 返回一个布尔值，表示当前元素的 hidden 属性，用来控制当前元素是否可见。该属性可读写
  - 这个属性并不能用来判断当前元素的实际可见性。由于该属性与 CSS 设置是互相独立的

- Element.contentEditable
  - 控制元素的内容是否能够编辑
    - true 元素内容可编辑
    - false 元素内容不可编辑
    - inherit 元素是否可编辑，继承了父元素的设置

- Element.isContentEditable
  - 返回一个布尔值，一样表示元素的内容是否能够编辑。该属性只读。

- Element.attributes
  - 返回一个相似数组的对象，成员是当前元素节点的全部属性节点

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

- Element.classList
  - 返回一个相似数组的对象，当前元素节点的每一个 class 就是这个对象的一个成员
  - classList 对象有下列方法
    - add() 增长一个 class
    - remove() 移除一个 class
    - contains() 检查当前元素是否包含某个 class
    - toggle() 将某个 class 移入或移出当前元素
      - 若是为 true，则添加该属性；若是为 false，则去除该属性
      - el.classList.toggle('abc', boolValue); // 等同于 if (boolValue) { el.classList.add('abc'); } else { el.classList.remove('abc'); }
    - item() 返回指定索引位置的 class
    - toString() 将 class 的列表转为字符串
  - 比较一下，className 和classList 在 添加和删除某个 class 时的写法
    - var foo = document.getElementById('foo'); // 添加class foo.className += 'bold'; foo.classList.add('bold'); // 删除class foo.classList.remove('bold'); foo.className = foo.className.replace(/^bold$/, '');

- Element.dataset
  - 返回一个对象，能够从这个对象读写 data- 属性
  - 网页元素能够自定义 data- 属性，用来添加数据
    - // <article // id="foo" // data-columns="3" // data-index-number="12314" // data-parent="cars"> // ... // </article> var article = document.getElementById('foo'); foo.dataset.columns // "3" foo.dataset.indexNumber // "12314" foo.dataset.parent // "cars"
  - data-属性的属性名，只能包含英文字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_）。
  - 它们转成 JavaScript 对应的dataset属性名，规则以下
    - 开头的 data- 会省略
    - 若是连词线后面跟了一个英文字母，那么连词线会取消，该字母变成大写
    - 其余字符不变
    - // data-abc-def 对应 dataset.abcDef
      // data-abc-1 对应 dataset["abc-1"]
- Element.innerHTML
  - 设置某个节点的内容
  - 它能改写全部元素节点的内容，包括 <HTML> 和 <body> 元素
  - 若是文本之中含有 <script> 标签，虽然能够生成script节点，可是插入的代码不会执行
  - 风险：
    - var name = "<img src=x onerror=alert(1)>"; el.innerHTML = name;
      上面代码中，alert方法是会执行的。对象
    - 所以为了安全考虑，若是插入的是文本，最好用 textContent 属性代替 innerHTMLblog

- Element.outerHTML
  - 返回一个字符串，表示当前元素节点的全部 HTML 代码，包括该元素自己和全部子元素
  - 是可读写的，对它进行赋值，等于替换掉当前元素
  - 变量 d 表明子节点，它的 outerHTML 属性从新赋值之后，内层的div元素就不存在了，被 p 元素替换了。
    - 可是，变量 d 依然指向原来的 div 元素，这表示被替换的 DIV 元素还存在于内存中
  - 若是一个节点没有父节点，设置 outerHTML 属性会报错。

- Element.clientHeight
  - 返回一个整数值，表示元素节点的 CSS 高度（单位像素）
  - 除了元素自己的高度，它还包括 padding 部分，可是不包括 border、margin，若是元素有水平滚动条，还要减去水平滚动条的高度
  - 只对块级元素生效，对于行内元素返回 0
  - 若是块级元素没有设置 CSS 高度，则返回实际高度

- Element.clientWidth
  - 返回一个整数值，表示元素节点的 CSS 宽度（单位像素）
  - 除了元素自己的宽度，它还包括 padding 部分，可是不包括 border、margin，若是元素有水平滚动条，还要减去水平滚动条的宽度
  - 只对块级元素生效，对于行内元素返回 0
  - 若是块级元素没有设置 CSS 宽度，则返回实际宽度
  - document.documentElement 的 clientHeight 属性，返回当前视口的高度（即浏览器窗口的高度）
  - 浏览器窗口的高度 = window.innerHeight 属性减去水平滚动条的高度（若是有的话）
  - document.body 的 clientHeight 高度则是网页的实际高度
  - 通常来讲，document.body.clientHeight 大于 document.documentElement.clientHeight

- Element.clientLeft
  - 元素节点左边框（left border）的宽度（单位像素）
  - 若是没有设置左边框，或者是行内元素（display: inline），该属性返回 0
  - 老是返回整数值，若是是小数，会四舍五入

- Element.clientTop
  - 网页元素顶部边框的宽度（单位像素）
  - 若是没有设置左边框，或者是行内元素（display: inline），该属性返回 0
  - 老是返回整数值，若是是小数，会四舍五入

- Element.scrollHeight
  - 返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分
  - 包括 padding，，还包括伪元素（::before或::after）的高度
  - 可是不包括 border、margin 以及水平滚动条的高度（若是有水平滚动条的话）
  - 属性只读

- Element.scrollWidth
  - 返回一个整数值（小数会四舍五入），表示当前元素的总宽度（单位像素），包括溢出容器、当前不可见的部分
  - 包括 padding，，还包括伪元素（::before或::after）的高度
  - 可是不包括 border、margin 以及垂直滚动条的高度（若是有垂直滚动条的话）
  - 属性只读

- Element.scrollLeft
  - 当前元素的水平滚动条向右侧滚动的像素数量
  - 没有水平滚动条的网页元素，属性老是等于0

- Element.scrollTop
  - 当前元素的垂直滚动条向下滚动的像素数量
  - 没有垂直滚动条的网页元素，属性老是等于0

- Element.offsetParent
  - 返回最近的开启了定位的祖先元素
  - 若是某个元素的全部上层节点的 position 属性都是static，则 Element.offsetParent 属性指向 <body> 元素（即便body{position: static;}）

- Element.offsetHeight
  - 返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括 content、padding 和 border，以及水平滚动条的高度（若是存在水平滚动条）
  - 只读属性
  - 若是元素的 CSS 设为不可见（好比display: none;），则返回0

- Element.offsetWidth
  - 返回一个整数，表示元素的 CSS 水平宽度（单位像素），包括 content、padding 和 border，以及垂直滚动条的宽度（若是存在垂直滚动条）
  - 只读属性
  - 若是元素的 CSS 设为不可见（好比display: none;），则返回0

- Element.offsetLeft
  - 返回当前元素左上角相对于 Element.offsetParent 节点的水平位移，单位为像素

Element.offsetTop

返回当前元素左上角相对于 Element.offsetParent 节点的垂直位移，单位为像素

算出元素相对于整张网页的坐标

// 获取元素 在 网页 中的 坐标    Test Already.
function getElementPosition(ele) {
    var left = 0;
    var top = 0;
    var p = ele;
    while (p !== null)  {
        left += p.offsetLeft;
        top += p.offsetTop;
        p = p.offsetParent;   // 遍历相对元素的坐标
    }
    
    var pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    var pageWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
    
    return {
        left: left,
        top: top,
        
        right: pageWidth - left - ele.offsetWidth,
        bottom: pageHeight - top - ele.offsetHeight
    };
}

- Element.style　　
  - 读写该元素的行内样式信息

- Element.children
  - 返回一个相似数组的对象（HTMLCollection实例），包括当前元素节点的全部子元素。
  - 若是当前元素没有子元素，则返回的对象包含零个成员

- Element.childElementCount
  - 返回当前元素节点包含的子元素节点的个数
  - 与 Element.children.length 的值相同

- Element.firstElementChild
  - 返回当前元素的第一个元素子节点
  - 若是没有元素子节点，这两个属性返回 null

- Element.lastElementChild
  - 返回最后一个元素子节点
  - 若是没有元素子节点，这两个属性返回 null

属性相关实例方法

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

其余实例方法
- Element.querySelector()
  - 接受 CSS 选择器做为参数，返回父元素的第一个匹配的子元素。
  - 若是没有找到匹配的子元素，就返回 null
  - 注意，这个方法没法选中伪元素
  - 多个选择器，它们之间使用逗号分隔

- Element.querySelectorAll()
  - 接受 CSS 选择器做为参数，返回一个 NodeList 实例，包含全部匹配的子元素

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.addEventListener()
  - - 添加事件的回调函数

- Element.removeEventListener()
  - - 移除事件监听函数

Element.dispatchEvent()

触发事件

element.addEventListener('click', listener, false);
element.removeEventListener('click', listener, false);

var event = new Event('click');
element.dispatchEvent(event);

Element.scrollIntoView()

滚动当前元素，进入浏览器的可见区域，相似于设置 window.location.hash 的效果

el.scrollIntoView();     // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);

// 若是为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）
// 若是为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）
// 若是没有提供该参数，默认为true

Element.getBoundingClientRect()

返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的全部信息
属性所有为只读

对于视口（viewport）的位置，会随着页面滚动变化，所以表示位置的四个属性值是动态的

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

都把边框（border属性）算做元素的一部分。继承
也就是说，都是从边框外缘的各个点来计算。
所以，width和height包括了元素自己 + padding + border

- Element.getClientRects()
  - 返回一个相似数组的对象，里面是当前元素在页面上造成的全部矩形

- Element.insertAdjacentElement()
  - 在相对于当前元素的指定位置，插入一个新的节点
  - 返回新插入的节点，若是插入失败，返回 null
  - 第一个参数是一个字符串，表示插入的位置

- - - - beforebegin 当前元素以前，只在当前节点有父节点时才会生效
      - afterbegin 当前元素内部的第一个子节点前面
      - beforeend 当前元素内部的最后一个子节点后面
      - afterend 当前元素以后，只在当前节点有父节点时才会生效

- - 第二个参数是将要插入的节点

- Element.insertAdjacentHTML(position, text);
  - 用于将一个字符串，解析生成 HTML DOM 结构，插入相对于当前节点的指定位置
    - beforebegin 当前元素以前，只在当前节点有父节点时才会生效
    - afterbegin 当前元素内部的第一个子节点前面
    - beforeend 当前元素内部的最后一个子节点后面
    - afterend 当前元素以后，只在当前节点有父节点时才会生效

- Element.insertAdjacentText()
  - 在相对于当前节点的指定位置，插入一个文本节点，用法与Element.insertAdjacentHTML() 方法彻底一致

- Element.remove()
  - 继承自 ChildNode 接口，用于将当前元素节点从它的父节点移除
    - var el = document.getElementById('mydiv'); el.remove();
      将 el 节点从 DOM 树里面移除

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

- Element.blur()
  - 用于将焦点从当前元素移除

- Element.click()
  - 用于在当前元素上模拟一次鼠标点击，至关于触发了 click 事件