DOM知识总结

DOM

什么是DOM

DOM：
document object model 文档对象模型
DOM是由节点组成。

节点类型

在HTML中，一切都是节点

• 元素节点：HTML标签
• 文本节点：标签中的文字（包括空格，换行）
• 属性节点：标签的属性
• 注释节点

获取DOM元素节点

• getElementById
• getElementByTagName
• getElementByclassName
• querySelector()
• querySelectorAll()

操作元素节点属性

1、原生属性

元素.属性名

 <img id="img" src="01.png"/>
 img.src = "02.png";

2、自定义属性

不是标签原自带的属性，是编程人员自定义的属性。

• 获取

  getAttribute（属性名）

• 设置

  setAttribute(属性名,属性值)

• 删除

  removeAttribute(属性名)
  以上方法可以操作自定义属性，也可以操作原生属性。

3、H5自定义属性

每一个元素都有一个dataset。里面包括了所有的h5自定义属性。

	  <div id="box" data-src="01.png" >
      </div>

• 获取属性

     box.dataset.src     
  

• 设置属性

     box.dataset.src = "02.png"
  

• 删除属性

     delete box.dataset.src
  

  操作元素的类名

  1.按照原生属性的方法去操作

• 设置/修改类名

   元素.className = "box"
  

• 追加类名

   元素.className += " 新值" 
  

• 删除类名

• 获取类名

• 截取字符串（按照空格分割）

• 循环遍历，找到想要删除的类名

• 将其移除，将新值重新复制给元素。

2.H5提供的API

元素有一个属性：classList 里面包含了元素所有的类名

• 删除类名

  元素.classList.remove(“移除的类名”)

• 追加类名

  元素.classList.add(“追加的类名”)

• 切换类名

  元素.classList.toggle(“切换的类名”)

  当元素有这个类名的时候，删除。

  当元素没有这个类名的时候，就添加

操作元素内容

• innerHTML
• innerText
• value

this关键字

this变量存储的是一个地址。一般情况下是当前函数的调用者的地址。

【注】this永远执行的是函数的调用者，但是调用者是谁要通过上下文去判断。

 a.b.c.d()  c 

操作元素节点的样式

1.style

利用原生属性的方式去操作

元素.style

获取的内容是一个对象，里面包含了元素所有的可设置样式。

• 设置样式

   <div id="box" style="width:100px"></div>
   box.style.width="200px";
   box.style.backgroundColor = "red"
  

• 获取样式

  只能获取行内样式。

2.获取生效的样式

2.1 window.getComputedStyle()

作用于标准浏览器（IE8以上）

• 语法：

  window.getComputedStyle(“要获取样式的元素”)

• 返回值：

  一个对象，里面是所有可设置的样式

• 例子：

  getComputedStyle(box).width;

2.2 currentStyle

作用于：

ie低版本

语法：

获取样式的元素.currentStyle

返回值：

一个对象，里面是所有可设置的样式

例子：

box.currentStyle().width

2.3 自定义获取样式的函数

//第一个参数：元素
//第二个元素：样式的属性名
function getStyle(node,cssStyle){
return getComputedStyle(node)?getComputedStyle(node)[cssStyle]:node.currentStyle()[cssStyle];
}

DOM节点操作

创建元素节点

格式：

var 变量名 = document.createElement("标签名");

创建文本节点

var 变量名 = document.createTextNode("标签名");

插入文档中

• appendChild

  父节点.appendChild(“新节点”)

  将新节点插入到父节点的最后。

• insertBefore

  父节点.insertBefore(“新节点”,参考节点)

  在父节点中参考节点的前面添加新节点。

  如果参考节点为null，则将新节点添加到父节点的最前面。

删除节点

• removeChild

  语法：父节点.removeChild(删除的子节点)

• remove

  语法：节点.remove()

  将自身节点从父节点中移除。

• 替换节点

  格式：父节点.replaceChild(新节点，旧节点)

• 复制节点

  格式：节点.cloneNode(true);

  不带参数或者参数为false时，只复制节点自身，不复制子节点。

  参数为true时，子节点也会被复制。