type
status
date
slug
tags
category
icon
password
元素的查找：
getElements?.*()
元素的周围指针：
el.firstChild/lastChild/nextSibiling/previousSibiling
el.parentNode/parentElement
el.firstElementChild/lastElementChild
el.nextElementSibiling/previousElementSibiling
el.childNodes/children
元素的常用方法：
对结点进行增删改
el.appendChild(node)
el.removeChild(node)
node.remove()
el.replaceChild(node, baseNode)
baseNode.replaceWith(node)
el.insertBefore(node, baseNode)
attr&prop：
node.xxxxx dom property
标准属性大都可以使用node.prop的形式访问,如
id,title,alt,src,href,type,name,value
class要用className,label的for属性要用htmlFor
node.get/set/remove/hasAttribute() html attribute
新浏览器的一些方便的dom功能:
el.classList.add/remove/replace/toggle/contains 访问及操作元素的class
el.dataset.xxxYyyy 访问data-属性
el.remove() 删除元素自身
el.parentElement.removeChild(el)
el.replaceWith(targetNode) 用targetNode替换el
el.append(string, node, node, string, …)
el.prepend(string, node, node, string, …)
el.innerHTML 元素内部的结点的html表示,也可以赋值
el.innerText 元素内部的文本内容,会受css影响
el.textContent 元素内部的文本结点的值按顺序拼接得到的内容
el.outerHTML 包含元素自身及内部的结点的html表示,也可以赋值,赋值会替换掉这个元素
相当于在innerHTML的结果前后加上元素自身的开始和结束标签
el.outerText 读取时等价于innerText,赋值时相当于用字符串替换该结点
function getInnerHTML(node) {
var result = ’’
for (var child of node.childNodes) {
result += getOuterHTML(child)
}
return result
}
function getInnerHTML(node) {
if (node.nodeType == document.TEXT_NODE) {
return node.nodeValue
} else {
var result = ’’
for (var child of node.childNodes) {
if (child.nodeType == document.TEXT_NODE) {
result += getInnerHTML(child)
} else
result +=
<${child.tagName}> + getInnerHTML(child) + </${child.tagName}>
}
return result
}
}function getTextContent(node) {
if (node.nodeType == document.TEXT_NODE) {
return node.nodeValue
} else {
var start = ``
for (var i = 0; i < node.childNodes.length; i++) {
start += getTextContent(node.childNodes[i])
}
return start
}
}
function getOuterHTML(node) {
if (node.nodeType == document.TEXT_NODE) {
return node.nodeValue
} else {
var tagName = node.tagName.toLowerCase()
var start =
<${tagName}>
for (var i = 0; i < node.childNodes.length; i++) {
start += getOuterHTML(node.childNodes[i])
}
return start + </${tagName}>
}
}// node.getElementsByTagName(tagName)
// getElementsByTagName(node, tagName)
function getElementsByTagName(node, tagName) {
var result = []
for (var child of node.children) {
if (child.tagName == tagName) {
result.push(child)
}
result.push(…getElementsByTagName(child, tagName))
}
return result
}
function getElementsByTagName(node, tagName) {
var result = []
// 先序遍历node为根结点的dom树
traverseDOM(node, it => {
// 遇到的每个结点,如果是要找的标签名,则push到结果里
if (it.tagName == tagName) {
result.push(it)
}
})
// 结果是一定不能包含根结点的
// 如果根结点在结果里,那么一定在第0项
if (result[0] == node) {
result.shift()
}
return result
}
function traverseDOM(node, action = console.log) {
if (node.nodeType == document.ELEMENT_NODE) {
action(node)
for (var child of node.children) {
traverseDOM(child, action)
}
}
}
// 带提前结束功能的遍历函数,让action返回false以提前结束
function traverseDOM(node, action = console.log) {
if (node.nodeType == document.ELEMENT_NODE) {
if (action(node) === false) {
return false
}
for (var child of node.children) {
if (traverseDOM(child, action) === false) {
return false
}
}
}
}
function getElementById(id, node = document.documentElement) {
if (node.id === id) {
return node
} else {
for (var child of node.children) {
var result = getElementById(id, child)
if (result) {
return result
}
}
return null
}
}
function getElementById(id) {
var result = null
try {
traverseDOM(document.documentElement, it => {
if (it.id === id) {
result = it
throw 2
}
})
} catch (e) {
if (e === 2) {
}
return result
}
function getElementById(id) {
var result = null
traverseDOM(document.documentElement, it => {
if (it.id === id) {
result = it
return false
}
})
return result
}
- 作者:CC
- 链接:https://juejin.cn/user/1086748304878360/article/1aa42600-9788-8185-87d5-d3789c5afe42
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
