本系列文章中所指的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()
- 同document.getElementsByClassName()
- 见原生DOM系列-Document对象
ele.getElementsByTagName()
- 同document.getElementsByTagName()
- 见原生DOM系列-Document对象
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()
- 同document.querySelector()
- 见原生DOM系列-Document对象
ele.querySelectorAll()
- 同document.querySelectorAll()
- 见原生DOM系列-Document对象
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:事件类型,如:
click
、showdialog(自定义)
- 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依然是选中状态
|