DOMインタビューの質問==

DOMインタビューの質問

ここに画像の説明を挿入します

判定

Webページを操作するためのJavaScriptインターフェースは、「ドキュメントオブジェクトモデル(ドキュメントオブジェクトモデル)」と呼ばれます。ドキュメント、要素、ノードなど、いくつかの概念があります。
ドキュメント全体がドキュメントノードです。
各ラベルは要素ノード
です。要素はテキストです。ノード
要素の属性は属性ノードです
。ドキュメントのコメントはコメントノードです。

DOMエッセンスDOMツリー:

DOMツリーは構造です。ツリーはDOM要素と属性ノードで構成されます。DOMの本質は、HTMLをjsで認識できる
ツリーモデルに構造化することです。ツリーモデルには、階層構造があります。階層構造構造とは要素と要素を指します。父と息子、兄弟の関係。

次の図は、htmlドキュメントを示しています。

ここに画像の説明を挿入します

OMツリーは逆さまの木のような形をしています。

家族間の関係を簡単に示し、複雑な関係を簡潔に示すことができます
ここに画像の説明を挿入します

DOMノードの操作

  • 新しいノード
  • 子ノードのクエリ
  • 親ノードを照会する
  • ノードを削除します

1. 创建新节点  (document调用)

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2. 添加、移除、替换、插入  (父元素调用)
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3. 查找 (document调用)
getElementsByTagName() //通过标签名称 一组元素
getElementsByName() //通过元素的Name属性的值 一组元素
getElementById() //通过元素Id,唯一性单个元素
getElementByClassName()//通过c元素lass获取  一组元素
qurySelectorAll('选择器') // 通过选择器获取一组元素
querySelector("选择器") // 通过选择器获取单个元素

4. 关系  (元素调用前三个父元素调用 )
 
childNodes // 获取所有的子节点
children  // 获取所有的子元素节点 (常用)
firstElementChild   获取第一个元素
lastElementChild  获取最后一个元素
parentNode	获取当前节点的父节点
previousElementSibling	获取当前节点的前一个兄弟元素
nextElementSibling 获取当前节点的后一个兄弟元素       

Domノードの属性とプロパティの違いは何ですか?

ここに画像の説明を挿入します

ここに画像の説明を挿入します

DOMのパフォーマンス

ここに画像の説明を挿入します

Domのパフォーマンスを改善してページを最適化する方法は?

ここに画像の説明を挿入します

DOM関連の面接の質問


问题1、dom是哪种基本的数据结构? 
树结构
问题2、Dom操作的常用API有哪些? 
①获取DOM节点,以及节点的property和Attribute 
②获取父节点,获取子节点  childNodes/ parentNode
③新增节点,删除节点 
问题3、Dom节点的Attribute和Property有和区别? 
①property只是一个JS对象的属性的修改 
②Attribute是对html标签属性的修改
问题4DOM性能优化。
将频繁的操作改为一次性操作,通过创建文档碎片,最后一次性加入文档碎片。

================================================== =================

おすすめ

転載: blog.csdn.net/WLIULIANBO/article/details/110879231