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

(88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点的更多相关文章

  1. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  2. jQuery获取元素的兄弟节点的几种方法

    $('#id').siblings() //当前元素所有的兄弟节点 $('#id').prev() //当前元素前一个兄弟节点 $('#id').prevaAll() //当前元素之前所有的兄弟节点 ...

  3. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  4. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  5. 使用jquery获取父元素或父节点

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

  6. jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    一, js 获取元素(父节点,子节点,兄弟节点)   var test = document.getElementById("test"); var parent = test.p ...

  7. (84)Wangdao.com第十八天_JavaScript 文档对象模型 DOM

    文档对象模型 DOM DOM 是 JavaScript 操作网页的接口, 全称为“文档对象模型”(Document Object Model). 作用是将网页转为一个 JavaScript 对象,从而 ...

  8. js 获取元素所有兄弟节点实例

    比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li——不包括红的li——的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你 ...

  9. js hasChildNodes()指针对元素节点子节点多个的话 true

    <select multiple size="2"> <option value="bj">北京</option> < ...

随机推荐

  1. PyQt5之窗口类型

    [TOC] 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 写在开头 1.1 本文内容 本文的主要内容:PyQt中的窗口部件:QMainWindow,QWidget,QDialog. 上述三 ...

  2. 第二节: 比较EF的Lambda查询和Linq查询写法的区别

    简介 在前面EF的介绍中,曾多次提到过EF可以使用Lambda和Linq来完成对数据库的访问,这两种的语法的具体使用和注意事项在前面的DotNet进阶的系列章节中已经详细介绍过了,本次借着EF章节,重 ...

  3. line-height && vertical-align 学习总结

    前言 line-height.font-size.vertical-align是设置行内元素布局的关键属性.这三个属性是相互依赖的关系,改变行间距离.设置垂直对齐等都需要它们的通力合作. 行高 lin ...

  4. Beamer 跳到另外一页

    \documentclass[english]{beamer}\usepackage{babel} \begin{document} \begin{frame}\frametitle{the refe ...

  5. thinkphp 5.6以上版本出现No input file specified解决办法

    打开thinkphp,出现No input file specified. 解决方法:在工程下的.htaccess文件里, 把RewriteRule ^(.*)$ index.php/$1 [QSA, ...

  6. mui弹出菜单

    详细操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  7. Highcharts开发图表

    1.折线图 显示一个静态的折线图,显示如下数据 星期 温度 周一 9~14 周二 4~10 周三 1~7 周四 4~9 周五 5~11 周六 8~13 周天 7~10 新建demo1.html < ...

  8. ch03 课下作业——缓冲区溢出漏洞实验

    一.实验简介: 缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段.这一漏洞的出现是由于数据缓冲器和返回地址的暂时关闭 ...

  9. SQL Server - JOIN

    JOIN

  10. Error while Installing APKs

    这一篇帖子 会写的比较简单 不过相信大家也可能遇到这些问题   为了怕自己忘记  记录下来  顺便也和大家一起分享 描述:在一些机型上安装软件 提示卸载原先的软件  但是又安装不上新软件DELETE_ ...