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

时间：2023-03-08 16:15:20

Element 节点 （元素节点）

是一组对象

对应网页的 HTML 元素

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

所有元素节点的 nodeType 属性都是 1

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

  • <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 就能将焦点转移到它上面

    • 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 属性代替 innerHTML

    • 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 事件