原生DOM系列-Element对象

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

ele.attributes

  • 返回当前元素的所有属性的集合
  • 返回NamedNodeMap,可通过数组下标或对象属性方式获取
1
2
3
4
5
6
7
8
9
10
// 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集合
  • 子元素集合即时更新
  • 只读属性
1
2
3
4
5
6
7
8
9
10
11
12
// 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
1
2
3
4
5
6
7
8
// 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
1
2
3
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属性
1
2
3
4
5
6
7
8
9
10
// 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

  • 获取或者设置元素的子元素内容
  • 字符串
1
2
3
4
5
6
7
8
9
10
11
12
// 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属性而被替换时,指向该元素的变量仍然指向替换前的元素
1
2
3
4
5
6
7
8
9
// 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’等
  • 返回离当前元素最近的祖先元素(包含当前元素)
1
2
3
4
5
6
7
8
9
10
11
12
// 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()进行初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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
1
2
3
4
5
6
7
8
// 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()

ele.getElementsByTagName()

ele.hasAttribute(attrName)

  • 返回该元素是否包含有指定的属性
1
2
3
4
5
6
7
8
9
// 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的结束标签之后
1
2
3
4
5
6
7
<!-- beforebegin -->
<div>
<!-- afterbegin -->
child
<!-- beforeend -->
</div>
<!-- afterend -->

ele.querySelector()

ele.querySelectorAll()

ele.remove()

  • 将自己从所在的DOM树种删除
1
2
3
4
5
6
7
8
// html
<body>
<div id="demo"></div>
</body>
// js
let demo = document.getElementById('demo')
demo.remove() // <div id="demo"></div>被删除

ele.removeAttribute()

  • 删除元素上指定的属性
1
2
3
4
5
6
7
8
// 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:事件类型,如:clickshowdialog(自定义)
  • listener:需要被删除的函数
  • userCaptre:true 移除冒泡阶段的事件;false 移除捕获阶段的事件
1
2
3
4
5
6
7
8
9
10
11
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。目前大部分浏览器尚不支持。可仅做了解
1
2
3
4
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "end", // 该参数等同于bool值得行为
}
1
2
3
4
5
6
7
8
9
10
11
// 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)

  • 添加一个新属性到元素上
  • 或者改变元素上已有属性的值
1
2
3
4
5
6
7
8
9
// 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相关方法操作
1
2
3
4
5
6
7
8
// html
<body>
<input id="demo" type="checkbox" checked="checked" />
</body>
// js
let demo = document.getElementById('demo')
demo.setAttribute('checked', null) // 元素的属性值会被设置为null,但页面中checkbox依然是选中状态
展开阅读全文

没有更多推荐了,返回首页