JavaScript的DOM操作

JavaScript的DOM操作

什么是 DOM?

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。

为简单起见，在API参考文档中的语法实例通常会使用element(s) 指代节点，使用nodeList（s）或 element(s)来指代节点数组，使用 attribute(s)来指代属性节点。

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

• 文档是一个文档。

• 所有的HTML元素都是元素节点。

• 所有 HTML 属性都是属性节点。

• 文本插入到 HTML 元素是文本节点。

DOM 创建

• document.createElement 创建元素节点

• document.createAttribute 创建一个属性节点

• document.createTextNode 创建文本节点

DOM 查询

• querySelector //返回匹配的第一个元素

• querySelectorAll //返回匹配的元素集合

• document.getElementById

• document.getElementsByClassName

• document.getElementsByTagName

• element.parentNode //父节点

• element.firstChild //第一个子元素节点

• element.lastChild //最后一个子元素节点

• element.previousSibling //上一个元素节点

• element.nextSibling //下一个元素节点

DOM 更改

• element.insertBefore() //在指定的已有的子节点之前插入新节点。

• element.appendChild() //向元素添加新的子节点，作为最后一个子节点。

• element.removeChild() //移除子节点

• element.cloneNode(deep)

• cloneNode() 方法创建节点的拷贝，并返回该副本。

• cloneNode() 方法克隆所有属性以及它们的值。

• 如果需要克隆所有后代，把 deep 参数设置 true，否则设置为 false。

• element.replaceChild(newnode,oldnode) //替换元素中的子节点。

属性操作

• element.attributes //返回元素属性的 NamedNodeMap。

• element.getAttribute() //返回指定属性值。

• element.hasAttribute() //元素是否拥有指定属性。

• element.setAttribute() //设置属性值。

• element.removeAttribute() //移除属性。

• element.textContent //设置或返回文本内容。

• element.innerHTML //设置或返回元素的内容。

• document.body.classList.add("a","b");

• document.body.classList.remove("a");

• document.body.classList.contains('myclass');

• document.body.classList.toggle('classtest');

• element.clientHeight //返回元素的可见高度。

• element.clientWidth //返回元素的可见宽度。

• element.offsetHeight //返回元素的高度。

• element.offsetWidth 返回元素的宽度。

DOM 操作应用

• 点击切换效果：

//html:
div.panels>div.panel*5


//js
var panels = document.querySelectorAll('.panel');   //获取panel的NodeList

panels.forEach(panel=>{panel.addEventListener('click',toggelClass)});  //监听点击事件

function toggelClass(){
  let siblings = [].filter.call(this.parentNode.children,child=>child!==this);   //获取兄弟元素
  siblings.forEach(item=>item.classList.remove('open'));
  this.classList.add('open');
}

更新：

silkshadow的github

参考文档

HTML DOM 对象