原生DOM系列-Element对象

最新推荐文章于 2024-01-26 16:48:25 发布

poclist

最新推荐文章于 2024-01-26 16:48:25 发布

阅读量1.1k

点赞数

分类专栏： php

php 专栏收录该内容

150 篇文章 1 订阅

订阅专栏

本系列文章中所指的DOM，都是纯纯的HTML DOM，不包括XML DOM等
文中ele代表通过document.getElementById()等方法返回的某元素对象实例

ele.attributes

返回当前元素的所有属性的集合
返回NamedNodeMap，可通过数组下标或对象属性方式获取

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <
      
      p id=
      
      "demo" class=
      
      "mod-demo" data-a=
      
      "a" style=
      
      "color: red">test attributes</p>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      let attrs = document.getElementById(
      
      'demo')
      
      .attributes
     
     
     
     
      
      attrs[
      
      'id']
      
      .name 
      
      // 'id'
     
     
     
     
      
      attrs[
      
      0]
      
      .val 
      
      // 'demo'
     
     
     
     
      
      attrs[
      
      'class']
      
      .value 
      
      // 'mod-demo'
     
     
     
     
      
      attrs[
      
      'data-a']
      
      .value 
      
      // 'a'

ele.children

返回当前元素的所有子元素(不包含非元素类节点)
返回HTMLCollection集合
子元素集合即时更新
只读属性

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
         
      
      <div id="demo">
     
     
     
             
      
      <!--注释-->
     
     
     
             
      
      <p>text
      
      </p>
     
     
     
             
      
      <img src="">
     
     
     
     
      
              text2
     
     
     
         
      
      </div>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      document.getElementById(
      
      'demo').children.length 
      
      // 2

ele.classList

只读属性
返回DOMTokenList
返回元素所有的class属性

classList	className
DOMTokenList	空格分隔的字符串

可以通过add()/remove()等方法修改

add(string[, string])

给属性添加class

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <p id=
      
      "demo">classlist</p>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = 
      
      document.getElementById(
      
      'demo')
     
     
     
     
      
      demo.add(
      
      'demo', 
      
      'red') 
      
      // p标签上增加`
      
      class="demo red"`

remove(string[, string])

删除指定的class
如果删除不存在的class，则不发生变化

1	demo .classList .remove( 'red', 'green') // p标签上的class变成`class="demo"`

item(num)

根据索引返回class值

1	demo .classList .item( 0) // 'demo'

toggle(string[, force])

进传入一个参数时，如果参数指定的class存在则移除并返回false，否则增加class并返回true
传入第二个参数时，如果第二个参数为true，则增加class，为false则删除class

     
     
      
      demo
      
      .classList
      
      .toggle(
      
      'red') 
      
      // class中增加red
     
     
     
     
      
      demo
      
      .classList
      
      .toggle(
      
      'red') 
      
      // class中的red又被删除
     
     
     
     
      
      demo
      
      .classList
      
      .toggle(
      
      'red', false) 
      
      // 删除red，但此时已经没有red了，则什么也不做

contains(string)

检查元素是否拥有指定的class
返回true或false

ele.className

返回字符串
返回class属性的值
使用className，而非class，主要因为class为js的保留字

ele.clientHeight || ele.clientWidth

返回元素内部的高度||宽度(单位像素)，包含内边距，但不包括水平||垂直滚动条、边框和外边距
CSS height + CSS padding - 水平||垂直滚动条高度

ele.firstElementChild || ele.lastElementChild

返回第一个||最后一个子元素，没有则返回null

ele.id

获取或者设置一个元素的id属性

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <
      
      p id=
      
      "demo">classlist</p>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo
      
      .id 
      
      // 'demo'
     
     
     
     
      
      demo
      
      .id = 
      
      'test'
     
     
     
     
      
      demo
      
      .id 
      
      // 'test'

ele.innerHTML

获取或者设置元素的子元素内容
字符串

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <
      
      p id=
      
      "demo">
     
     
     
     
      
              abc
     
     
     
     
      
              <span>text</span>
     
     
     
     
      
          </p>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo
      
      .innerHTML 
      
      //  'abc <span>text</span>'
     
     
     
     
      
      demo
      
      .innerHTML = 
      
      '<span class="new">new text</span>' 
      
      // demo中的内容改变为新赋值的元素

ele.nextElementSibling || ele.previousElementSibling

返回下一个||上一个兄弟元素节点
如果此节点为最后一个，则返回null
该属性只读

ele.outerHTML

返回包含当前元素及其所有后代节点所形成的序列化的HTML片段字符串
可读可写
给其赋值可以替换掉当前元素及其所有后代元素
当一个元素因为修改自身的outerHTML属性而被替换时，指向该元素的变量仍然指向替换前的元素

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <
      
      p id=
      
      "demo">old</p>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo
      
      .outerHTML = 
      
      '<p id="newDemo">new</p>'
     
     
     
     
      
      demo
      
      .id 
      
      // 'demo'

ele.scrollHeight || ele.scrollWidth

返回元素的内容高度||宽度
只读属性
包含被overflow hidden的部分
包括元素的padding，但不包括元素的margin

1 2	// 判断元素是否滚动到底 ele.scrollHeight - ele.scrollTop === ele.clientHeight

ele.scrollLeft

读取或设置元素滚动条到元素左边的距离
如果元素不能滚动，则其值为0
设置小于0的值时，其值为0

1	ele .scrollLeft += 20 // 向右滚动20像素

ele.tagName

返回该元素的标签名
字符串

ele.addEventListener(type, listener[ ,useCapture])

继承自其父类EventTarget
type 字符串，所监听的事件类型，如’click’
listener 回调函数
useCapture 指定在捕获阶段还是冒泡阶段触发事件回调，true为捕获阶段，false为冒泡阶段
思考题：同ele.onclick的区别

ele.closest(selectors)

selectors 选择器，如’.demo’ ‘#demo’等
返回离当前元素最近的祖先元素(包含当前元素)

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
         
      
      <div class="demo1">
     
     
     
             
      
      <div class="demo1"> 
      
      <!-- 下面的js返回此元素 -->
     
     
     
                 
      
      <p id="demo">text
      
      </p>
     
     
     
             
      
      </div>
     
     
     
         
      
      </div>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById('dmo')
     
     
     
     
      
      demo.closest('.demo1')

ele.dispatchEvent(event)

event 被派发的事件，通过document.createEvent()进行创建，通过自身的initEvent()进行初始化

     
     
      
      //html
     
     
     
     
      
      <body>
     
     
     
     
      
          <p id=
      
      "demo">text</p>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo.addEventListener(
      
      'alert', function(){
     
     
     
     
      
          alert(
      
      '自定义事件')
     
     
     
     
      
      }, 
      
      false)
     
     
     
     
     
     
      
      let 
      
      event = document.createEvent(
      
      'HTMLEvents')
     
     
     
     
      
      event.initEvent(
      
      'alert', 
      
      false, 
      
      false) 
      
      // 第二个参数:是否冒泡，第三个参数:是否可被取消
     
     
     
     
      
      demo.dispatchEvent(
      
      event) 
      
      // 页面中alert弹出'自定义事件'

ele.getAttribute(attrName)

attrName String，属性名
返回元素上指定属性的值
返回字符串或null

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <
      
      div id=
      
      "demo" data-id=
      
      "123"></
      
      div>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo.getAttribute(
      
      'data-id') 
      
      // 123

ele.getBoundingClientRect()

返回元素的大小机器相对于视口的位置
返回值是DOMRect对象

ele.getElementsByClassName()

同document.getElementsByClassName()
见原生DOM系列-Document对象

ele.getElementsByTagName()

同document.getElementsByTagName()
见原生DOM系列-Document对象

ele.hasAttribute(attrName)

返回该元素是否包含有指定的属性

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <
      
      p id=
      
      "demo" name=
      
      "123"></p>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo.hasAttribute(
      
      'name') 
      
      // true
     
     
     
     
      
      demo.hasAttribute(
      
      'age') 
      
      // false

ele.insertAdjacentHTML(position, text)

将html片段插入到指定的位置
position：表示位置的字符串

beforebegin	afterbegin	beforeend	afterend
插入到ele的开始标签之前	插入到ele的开始标签之后	插入到ele的结束标签之前	插入到ele的结束标签之后

     
     
      
      <!-- beforebegin -->
     
     
     
     
      
      <div>
     
     
     
     
      
      <!-- afterbegin -->
     
     
     
     
      
      child
     
     
     
     
      
      <!-- beforeend -->
     
     
     
     
      
      </div>
     
     
     
     
      
      <!-- afterend -->

ele.querySelector()

同document.querySelector()
见原生DOM系列-Document对象

ele.querySelectorAll()

同document.querySelectorAll()
见原生DOM系列-Document对象

ele.remove()

将自己从所在的DOM树种删除

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
         
      
      <div id="demo">
      
      </div>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById('demo')
     
     
     
     
      
      demo.remove() // 
      
      <div id="demo">
      
      </div>被删除

ele.removeAttribute()

删除元素上指定的属性

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <div id=
      
      "demo" 
      
      class=
      
      "demo"></div>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo.removeAttribute(
      
      'class') 
      
      // <div id="demo"></div>

ele.removeEventListener(type, listener[, userCaptre])

删除通过ele.addEventListener()方法添加的事件
type：事件类型，如：click、showdialog(自定义)
listener：需要被删除的函数
userCaptre：true 移除冒泡阶段的事件；false 移除捕获阶段的事件

     
     
      
      let demo = 
      
      document.getElementById(
      
      'demo')
     
     
     
     
      
      let listener = 
      
      () => {
     
     
     
     
      
          alert(
      
      1)
     
     
     
     
      
      }
     
     
     
     
      
      demo.addEventListener(
      
      'click', listener, 
      
      false)
     
     
     
     
      
      demo.removeEventListener(
      
      'click', listener, 
      
      true) 
      
      // 无法移除，因为移除的是捕获阶段的事件
     
     
     
     
      
      demo.removeEventListener(
      
      'click', listener, 
      
      false) 
      
      // 被正确移除
     
     
     
     
     
     
      
      demo.addEventListener(
      
      'click', () => {
     
     
     
     
      
          alert(
      
      2)
     
     
     
     
      
      }, 
      
      false) 
      
      // 此事件无法被移除，因为是绑定的匿名回调

ele.scrollIntoView(bool||obj)

让当前的元素滚动到浏览器窗口的可视区域内
如果参数为bool值
- true 元素的顶端和可视区的顶端对齐，不传则默认为true的行为
- false 元素的底端和可视区的底端对齐
如果参数为obj。目前大部分浏览器尚不支持。可仅做了解

     
     
      
      {
     
     
     
         
      
      behavior: 
      
      "auto"  | 
      
      "instant" | 
      
      "smooth",
     
     
     
     
      
          block:    
      
      "start" | 
      
      "end", // 该参数等同于bool值得行为
     
     
     
     
      
      }

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
         
      
      ....这里有很多元素，把demo元素挤出了可视区的下边缘
     
     
     
     
      
          <p id=
      
      "demo">我要滚动啦</p>
     
     
     
         
      
      ....这里也有很多元素，滚到底部是，demo元素被挤出可视区的上边缘
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js 元素不在可视区内
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo.scrollIntoView(
      
      false) 
      
      // 元素出现在可视区的下边缘
     
     
     
     
      
      demo.scrollIntoView(
      
      true) 
      
      // 元素出现在可视区的上边缘

ele.setAttribute(name, value)

添加一个新属性到元素上
或者改变元素上已有属性的值

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
     
      
          <
      
      div id=
      
      "demo" class=
      
      "demo"></
      
      div>
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = document.getElementById(
      
      'demo')
     
     
     
     
      
      demo.setAttribute(
      
      'test', 
      
      'test') // <
      
      div id=
      
      "demo" class=
      
      "demo" test=
      
      "test"></
      
      div>
     
     
     
     
      
      demo.setAttribute(
      
      'class', 
      
      'ele-demo') // <
      
      div id=
      
      "demo" class=
      
      "ele-demo" test=
      
      "test"></
      
      div>

表单元素的部分属性无法通过该方法得到想要的结果，这些属性应该使用prop相关方法操作

     
     
      
      // html
     
     
     
     
      
      <body>
     
     
     
         
      
      <input id="demo" type="checkbox" checked="checked" />
     
     
     
     
      
      </body>
     
     
     
     
     
     
      
      // js
     
     
     
     
      
      let demo = 
      
      document.getElementById(
      
      'demo')
     
     
     
     
      
      demo.setAttribute(
      
      'checked', 
      
      null) 
      
      // 元素的属性值会被设置为null，但页面中checkbox依然是选中状态

poclist

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生DOM系列-Element对象

本系列文章中所指的DOM，都是纯纯的HTML DOM，不包括XML DOM等文中ele代表通过document.getElementById()等方法返回的某元素对象实例ele.attributes返回当前元素的所有属性的集合返回NamedNodeMap，可通过数组下标或对象属性方式获取12345678910// html p id="
复制链接

扫一扫