1. ノード属性 (nodeName、nodeType、nodeValue):
ドキュメントノード:
nodeType = 9nodeValue = nullnodeName= #document
要素ノード:
nodeType = 1nodeValue = nullnodeName= 标签名
属性ノード:
nodeType = 2nodeValue = 属性值nodeName= 属性名
テキストノード:
nodeType = 3nodeValue = 文本内容nodeName= #text
2. ドムの取得：
① body タグを取得します:document.getElementsByTagName("body")[0]またはdocument.body
② HTMLのルートタグを取得します。document.documentElement
③ ページ内のすべての要素を取得します。document.allまたはdocument.getElementsByTagName("*")
④ label 要素の属性を取得します。元素.属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
</script>
</head>
<body>
<div id="app">
<button class="btn">我是一个按钮</button>
<input type="text" value="请输入" class="input0"/>
</div>
<script>
let inputDom = document.getElementsByClassName("input0")[0]
console.log('inputDom',inputDom.value)
</script>
</body>
</html>
⑤ 現在の要素の下にあるすべての子ノードを取得します (IE8 以降には改行とスペースが含まれます)。元素.childNodes
⑥ 現在の要素の下にあるすべての子要素を取得します（スペースを除く）。元素.children
⑦ 現在の要素の下にある最初の子ノードを取得します (IE8 以降には改行とスペースが含まれます)。元素.firstChild
⑧ 現在の要素の下にある最初の子要素を取得します (スペースなし、IE8 以降に適用):元素.firstElementChild
⑨ 現在の要素の親ノードを取得します。元素.parentNode
⑩ 現在の要素の以前の兄弟ノードを取得します (おそらく、または空白を取得します)。元素.previousSibling
⑪ 現在の要素の前の兄弟要素を取得します (空白は取得されません)。元素.previousElementSibling
⑫ 現在の要素の次の兄弟ノードを取得します (場合によっては空白を取得します)。元素.nextSibling
3. Domの追加、削除、変更：
① 新しい要素ノードを作成します。document.createElement("标签名")
② 子ノードを親ノードに追加します。父节点.appendChild(子节点)
③ 指定した子ノードの前に新しい子ノードを挿入します。父节点.insertBefore(newChild, oldChild)
④ 既存の子ノードを置き換える子ノードを指定します。父节点.replaceChild(newChild, oldChild)
⑤ 子ノードを削除します。
-
1、父节点.removeChild(要删除的子节点)
-
2、子节点.parentNode.removeChild(要删除的子节点)
⑥ 新しいテキストノード:document.createTextNode("文本")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>第1个div</div>
<div>第2个div</div>
<ul>
<li>1、哈哈哈</li>
<li>2、嘻嘻嘻</li>
</ul>
</div>
<script>
/**
* 给指定的父元素新增一个子节点
*/
// 方法一：
// 新建元素节点
let liDom = document.createElement("li")
// 给指定元素添加文本
// liDom.innerText = '3、嘿嘿嘿'
// 同理：给指定元素添加文本方法2（需要两步，①新增文本节点 ②将文本节点放在元素节点内容）
let liText = document.createTextNode("3、嘿嘿嘿")
// 向父节点中添加子节点 -- 父节点.appendChild(子节点)
liDom.appendChild(liText)
// 最后将构造完成的子节点，放在父元素的里边
let ulDom = document.getElementsByTagName("ul")[0]
ulDom.appendChild(liDom)
// 方法二：直接使用innetHTML进行父元素内容的重写（如果有绑定的函数，则会失效），不推荐直接使用
// let ulDom = document.getElementsByTagName("ul")[0]
// ulDom.innerHTML += '<li>3、嘿嘿嘿</li>'
/**
* 在指定的子节点前面插入新的子节点
* -- 父节点.insertBefore(newChild, oldChild)
*/
let oldChildDom = document.getElementsByTagName("li")
let newChildDom = document.createElement("H1")
newChildDom.innerText = '放在 3、嘿嘿嘿 之前'
ulDom.insertBefore(newChildDom, oldChildDom[oldChildDom.length - 1])
/**
* 指定子节点替换已有的子节点
* -- 父节点.replaceChild(newChild, oldChild)
*/
let replaceChildDom = document.createElement("p")
let pText = document.createTextNode("使用 p 标签替换 H1")
replaceChildDom.appendChild(pText)
ulDom.replaceChild(replaceChildDom, newChildDom)
/**
* 删除子节点
* -- 1、父节点.removeChild(要删除的子节点)
* -- 2、子节点.parentNode.removeChild(要删除的子节点)
*/
// ulDom.removeChild(replaceChildDom)
// replaceChildDom.parentNode.removeChild(replaceChildDom)
</script>
</body>
</html>
4. 要素のスタイル:
① インラインスタイルを取得します。元素.style.样式名称
② 現在表示されているスタイルを取得します (読み取りのみ可能、変更不可、変更したい場合はスタイルを使用する必要があります):
-
1. ie のみがサポートします:元素.currentStyle.样式名称
-
2. 他のブラウザ: Windows オブジェクトでgetComputedStyle()メソッドを。このメソッドは 2 つのパラメータを受け取ります。
-
パラメータ 1: スタイルを取得する必要がある要素
-
パラメータ 2: 疑似要素を渡します。通常は null を渡します。
-
戻り値: キーはスタイル名、値はスタイル名のオブジェクトです。
③要素の表示領域の幅と高さを取得します（ピクセルなし）：
-
1、clientWidth - 包含width+padding
-
2、clientHeight - 包含width+padding
④ 要素の全体の幅と高さを取得します（ピクセルを除く）。
-
1、offsetWidth - 包含width+padding+border
-
2、offsetHeight - 包含width+padding+border
⑤ 現在の要素の配置親要素を取得します (現在の要素に最も近い祖先の配置を取得します。配置が有効になっている祖先要素がない場合は、body を返します)。
-
offsetParent - 包含width+padding+border
⑥ 配置された親要素に対する現在の要素の水平オフセットを取得します。offsetLeft
⑦ 配置された親要素に対する現在の要素の垂直オフセットを取得します。offsetTop
⑧ スクロール領域の幅を取得します。scrollWidth
⑨ スクロール領域の高さを取得します。scrollHeight
⑩ 水平スクロールバーのスクロール距離を取得します。scrollLeft
⑪ 垂直スクロールバーのスクロール距離を取得します。scrollTop
満足するとscrollHeight - scrollTop == clientHeight、垂直スクロールバーが一番下までスクロールすることを意味します
満足するとscrollWidth - scrollLeft == clientWidth、水平スクロールバーが最後までスクロールすることを意味します
onscroll イベント: スクロール バーがスクロールするとトリガーされます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
#app {
/* position: relative; */
}
#box1 {
width: 100px;
height: 100px;
background-color: pink;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div id="app">
<div id="box1" style="border: 6px solid blue;"></div>
</div>
<script>
window.onload = function() {
let box1Dom = document.getElementById("box1")
// 获取行内样式：元素.style.样式名称
let borderWidth = box1Dom.style.borderWidth
console.log('borderWidth',borderWidth) // 6px
// 设置（可以增加，也可以修改）样式
box1Dom.style.borderColor = 'purple'
console.log('行内样式Width',box1Dom.style.width) // 获取不到
/**
* 获取当前正在显示的样式（只能读，不能修改，想要修改要使用style）：
* - 只有ie支持：元素.currentStyle.样式名称
* - 其他浏览器：使用windows对象上的 getComputedStyle() 方法，此方法接收两个参数：
* - 参数一：需要获取样式的元素
* - 参数二：传递一个伪元素，一般传null
* - 返回值：key是样式名，值是样式名的对象
*/
let box1DomCurrentStyle = getComputedStyle(box1Dom, null)
console.log('当前正在显示的样式Width',box1DomCurrentStyle.width) // 100px
/**
* 获取元素可见区的宽度和高度（不带px）：
* clientWidth - 包含width+padding
* clientHeight - 包含width+padding
*/
let box1DomClientWidth = box1Dom.clientWidth
console.log('box1Dom可见宽度',box1DomClientWidth) // 120px
/**
* 获取元素整个的宽度和高度（不带px）：
* offsetWidth - 包含width+padding+border
* offsetHeight - 包含width+padding+border
*/
let box1DomOffsetWidth = box1Dom.offsetWidth
console.log('box1Dom整个的宽度',box1DomOffsetWidth) // 130px
/**
* 获取当前元素的定位父元素（获取到离当前元素最近的祖先定位，如果没有开启定位的祖先元素，则返回body）：
* offsetParent - 包含width+padding+border
*/
let box1DomOffsetParent = box1Dom.offsetParent
console.log('box1Dom的定位父元素',box1DomOffsetParent) // body
/**
* 获取当前元素相对于其定位父元素的水平偏移量：offsetLeft
* 获取当前元素相对于其定位父元素的垂直偏移量：offsetTop
*/
let box1DomOffsetLeft = box1Dom.offsetLeft
console.log('box1Dom相对于其定位父元素的水平偏移量',box1DomOffsetLeft) // 相对于body
}
</script>
</body>
</html>