<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>dom 演示</title>
        <style>
            .container {border: 1px solid #ccc;}
            .red {color: red;}
        </style>
    </head>
    <body>
        <div id="div1" class="container">
            <p id="p1">一段文字 1</p>
            <p>一段文字 2</p>
            <p>一段文字 3</p>
        </div>
        <div id="div2">
            <img src="https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg"/>
        </div>
        <ul id="list">
        </ul>
        <script src="./dom-3.js"></script>
    </body>
</html>

第二に、DOMノードの操作

1. DOMノードを取得する

2.プロパティ

3.属性

const div1 = document.getElementById('div1')
console.log('div1', div1)
const divList = document.getElementsByTagName('div') // 集合
console.log('divList.length', divList.length)   // 2
console.log('divList[1]', divList[1])     // 第二个div

const containerList = document.getElementsByClassName('container') // 集合
console.log('containerList.length', containerList.length)   // 2
console.log('containerList[1]', containerList[1])    // 第二个div

const pList = document.querySelectorAll('p')    // css选择器
console.log('pList', pList)

const pList = document.querySelectorAll('p')
const p1 = pList[0]

// property 形式，修改JS变量的属性，不会对标签产生影响
p1.style.width = '100px'
console.log( p1.style.width )     // 获取样式:100px
p1.className = 'red'      
console.log( p1.className )     // 获取className:red
console.log(p1.nodeName)     // p
console.log(p1.nodeType)     // 1类型

// attribute形式，修改了标签的属性
p1.setAttribute('data-name', 'imooc')
console.log( p1.getAttribute('data-name') )
p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )

プロパティと属性

プロパティ：オブジェクトのプロパティを変更します。html構造には反映されません

属性：html属性を変更すると、html構造が変更されます

どちらもDOMを再レンダリングする可能性があります

（使用に関する推奨事項：ラベルの構造を変更する必要がある場合は属性を使用して、できるだけプロパティ操作を使用するようにしてください）

一般的に使用されるいくつかのHTML DOMメソッド

getElementById（id）-指定したIDのノード（要素）を取得します

appendChild（ノード）-新しい子ノード（要素）を挿入します

removeChild（ノード）-子ノード（要素）を削除する

一般的に使用されるいくつかのHTML DOM属性：

innerHTML-ノードのテキスト値（要素）

parentNode-ノードの親ノード（要素）

childNodes-ノードの子ノード（要素）

attributes-ノード（要素）の属性ノード

3、DOM構造操作

1.ノードの追加/挿入

2.子要素のリストを取得し、親要素を取得します

3.子要素を削除する

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')
// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// 插入节点
div1.appendChild(newP)
// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)   // p1被移动到div2里
// 获取父元素
console.log( p1.parentNode )    // div2
// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log( div1.childNodes )      // 7(包含4 text和3 p)
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
    if (child.nodeType === 1) {    // 判断是否是<p>的DOM节点
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)
// 删除节点
div1.removeChild( div1ChildNodesP[0] )

方法	説明文
getElementById（）	指定されたIDを持つ要素を返します。
getElementsByTagName（）	指定されたタグ名を持つすべての要素を含むノードリスト（コレクション/ノード配列）を返します。
getElementsByClassName（）	指定されたクラス名を持つすべての要素を含むノードのリストを返します。
appendChild（）	指定したノードに新しい子ノードを追加します。
removeChild（）	子ノードを削除します。
replaceChild（）	子ノードを置き換えます。
insertBefore（）	指定した子ノードの前に新しい子ノードを挿入します。
createAttribute（）	属性ノードを作成します。
createElement（）	要素ノードを作成します。
createTextNode（）	テキストノードを作成します。
getAttribute（）	指定された属性値を返します。
setAttribute（）	指定された属性を指定された値に設定または変更します。

4、DOMパフォーマンス

DOM操作は非常に「高価」であり（CPUを占有するため、ブラウザーの再配置と時間がかかる可能性があります）、頻繁なDOM操作を回避するようにしてください。

DOMクエリのキャッシュ（DOM操作の削減）;

頻繁な操作を1回限りの操作に変更します。

1. DOMクエリキャッシュ

2.頻繁な操作を1回限りの操作に変更する

// 操作：在list下插入多个list-item
const list = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()
for (let i  = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`
    // list.appendChild(li)违反频繁操作DOM准则，应该把每次插入作为一个整体，进行一次插入操作
    // 插入文档片段中
    frag.appendChild(li)
}
// 都完成之后，再统一插入到 DOM 结构中
list.appendChild(frag)
console.log(list)

回答

1. DOMとはどのようなデータ構造ですか？

DOMツリー

2. DOM操作用の共通APIはありますか？

DOMノード操作

DOM構造操作

3. AttrとPropertyの違いは何ですか？

プロパティ：オブジェクトのプロパティを変更します。html構造には反映されません

属性：html属性を変更すると、html構造が変更されます

どちらもDOMを再レンダリングする可能性があります

4.パフォーマンスを考慮して、一度に複数のDOMノードを挿入する

ファイルフラグメントの作成createDocumentFragment（）

6.まとめ

DOMの本質
DOMノード操作
DOM構造操作
DOMパフォーマンス

レイチェルCC

元の記事を26件公開しました・賞賛されました6 ・訪問1386

プライベートの手紙の懸念

フロントエンドのJSインタビューをすばやく取得する-第6章JS-Web-API-DOM

JSの基本からJS Web APIへ

第6章JS-Web-API-DOM

1. DOMの本質