DOM编程

一、概述

1. 在HTML DOM中，任何东西都是节点：
2. 所有HTML元素都是一个元素节点；
3. 所有HTML属性都是一个属性节点；
4. 元素内的文本是一个文本节点；

<div class='test1' id='a'>text</div>

其中整个div标签是一个元素节点

class='test1’是一个属性节点

test1是一个文本节点，当然如果’ '其中没有任何的文字也是一个文本节点

所有的节点都有一个nodeType属性，可以判断节点的类型，如下图：

NodeType	Named Constant
1	ELEMENT_NODE 元素节点
2	ATTRIBUTE_NODE 属性节点
3	TEXT_NODE 文本节点

DOM说白了就是对节点的增删查改

二、元素节点

获取元素节点的方法

• 根据id获取一个元素节点
  var div1 = document.getElementById('div1')
• 根据标签名获得一堆元素的节点
  var li1 = document.getElementsByTagName('li')
• 根据class获取一堆元素节点
  var div2 = document.getElementsByClassName("content")
• 使用css选择器选择第一个匹配的元素节点
  var d1 = document.querySelector(".content")
• 根据css选择器选择一批能够被匹配到的所有的元素
  var d1 = document.querySelectorAll(".content")

修改元素节点的内容

• 不渲染html标签，标签会当做文本打印出来
  mydiv.innerText = "wenben"
• 会将html渲染出来
  mydiv.innerHTML = "wenben"

删除一个元素节点

• 直接将自己删除

var mydiv = document.getElementById("div1")
mydiv.remove();

• 清除内容

mydiv.innerText = ""

• 删除某个子元素节点

//1、找到这个字元素节点
var myul = document.getElementsByTagName('ul')[0];
//2、调用方法干掉，注意这个方法参数一定要是个元素节点
mydiv.removeChild(myul)

创建一个新的元素节点

//1，创建一个div标签在内容中
var mydiv = document.createElement("mydiv")
//2，添加几个属性
mydiv.setAttribute("name","mydiv");
mydiv.setAttribute("class","test");
//3，获取到我的div
var div1 = document.getElementById("div1");
//4，将内存中新建的div实实在在的加入到我的div中
div1.append(mydiv)

获取所有子节点

//children属性能获取所有的子元素节点，不包括文本节点
mydiv.children
HTMLCollection [ul]

//children属性能获取所有的子元素节点，包括文本节点
mydiv.childNodes
NodeList(3) [text, ul, text]
    
//子节点也是元素节点，一样可以有子节点    
mydiv.children[0].children    

属性节点

使用元素节点方法进行增删查改

//获取元素节点
var mydiv = document.getElementById("div1")
//获取这个属性的值
mydiv.getAttribute("name")
//修改，同时可以添加一个属性的值
mydiv.setAttribute("name","cccc")
//删除一个属性
mydiv.removeAttribute("name")

使用属性节点对象对属性本身进行操作

//获取所有的属性节点的集合，是个可以当成数组
mydiv.attributes
//通过下标拿到第二个属性
mydiv.attributes[1]
//拿到属性的name
var attrName = mydiv.attributes[1].name
//拿到属性的值
var attrValue = mydiv.attributes[1].value
//修改这个属性的值
mydiv.attributes[1].value = "aaa"