JS—DOM应用

DOM基础

DOM节点

• chidNodes、nodeType
  • 父节点parentNodes

获取子节点，childNodes可以看作一个数组，范围只在第一层

文本节点：元素之间的可以称作文本节点。

元素节点：html元素

nodeType是用来判断是什么节点类型

children只包括元素，不包括文本

判断父节点不是根据HTML的位置判断

• 首尾子节点

  • firstChild、firstElementChild

    • lastChild、lastElementChild

• 兄弟节点
  • nextSibling、nextElementSibling
  • previousSibling、previousElementSibling
• 兼容性问题解决办法：

操纵元素属性：

• 元素属性操作：
  • oDiv.style.display="block";
  • oDiv.style["display"]="block";
  • Dom方法
• DOM方式操作元素属性
  • 获取：getAttribute(名称)
  • 设置: setAttribute（名称，值）
  • 删除:removeAttribute（名称）

DOM元素查找

• 用classNmae选择元素
  • 如何使用className选择元素
  • 选出所有元素
  • 通过className条件筛选
• 封装成函数

  • 一般可以封装函数getByClass，使用时直接使用函数名

    getByClass(父节点，class)

DOM操作应用

创建、插入、和删除元素

创建DOM元素

createElement(标签名)   创建一个节点

appendChild(节点) 追加一个节点

插入元素

insert Before（系欸但，原有节点）   在已有元素前插入

删除DOM元素

removeChild(节点) 删除一个节点

创建元素：createElement('li')

添加子节点：父级.appendChild(子节点)

1、先把元素从父级删除

2、添加到新的父级上

删除子节点：父级.removeChild(子节点）

文档碎片

文档碎片可以提高DOM操作性能（理论上）

文档碎片原来

document.createDocumnetFragment()