JUICIO
La interfaz JavaScript para manipular páginas web se llama "Modelo de objeto de documento (Modelo de objeto de documento). Hay varios conceptos: documento, elemento, nodo.
Todo el documento es un nodo de documento.
Cada etiqueta es un nodo de elemento
. El texto contenido en el elemento es texto. Nodo
El atributo del elemento es un nodo de atributo
El comentario en el documento es un nodo de comentario
DOM esencia DOM árbol:
El árbol DOM es una estructura. El árbol está compuesto por elementos DOM y nodos de atributos. La esencia de DOM es estructurar HTML en un modelo de árbol que pueda ser reconocido por js;
Con el modelo de árbol existe una estructura jerárquica, la estructura jerárquica se refiere a la relación entre elementos y elementos, padre e hijo, hermanos.
La siguiente imagen es un documento html: El
árbol DOM tiene la forma de un árbol invertido.
Es fácil mostrar la relación entre los miembros de la familia y mostrar de manera concisa la relación compleja.
Operación del nodo DOM
- Nuevo nodo
- Consultar nodo hijo
- Consultar nodo principal
- Eliminar nodo
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 获取当前节点的后一个兄弟元素
¿Cuál es la diferencia entre atributo y propiedad del nodo Dom?
Rendimiento DOM
¿Cómo mejorar el rendimiento de Dom y optimizar las páginas?
Preguntas de entrevistas relacionadas con DOM
问题1、dom是哪种基本的数据结构？
树结构
问题2、Dom操作的常用API有哪些？
①获取DOM节点，以及节点的property和Attribute
②获取父节点，获取子节点 childNodes/ parentNode
③新增节点，删除节点
问题3、Dom节点的Attribute和Property有和区别？
①property只是一个JS对象的属性的修改
②Attribute是对html标签属性的修改
问题4、DOM性能优化。
将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。