原生DOM系列-Element对象

来源：互联网发布：单片机定时器流程图编辑：程序博客网时间：2024/06/06 19:37

本系列文章中所指的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属性

classListclassNameDOMTokenList空格分隔的字符串

可以通过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，则不发生变化

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

item(num)

根据索引返回class值

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属性

// 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

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：表示位置的字符串

beforebeginafterbeginbeforeendafterend插入到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依然是选中状态

0 0