11DOM

DOM

Document Object Model （DOM 文档对象模型）是HTML和XML文档的编程接口，定义了访问和操作HTML和XML文档的标准方法

DOM是以树型目录结构表达HTML和XML文档的，每一个节点就是一个DOM元素

节点层次

父子节点和同胞节点

• 在节点树中，顶端节点被称为根（root）

• 每个节点都有父节点，除了根（它没有父节点）

• 一个节点可以拥有任意数量的子节点

• 同胞是拥有相同父节点的节点

节点分类

常见节点分类：

• 元素节点：标签

• 属性节点：标签的属性

• 文本节点：标签后的换行符

• 文档 节点：document

节点名称(nodeName)

nodeName 是只读的，不能被重新赋值修改

节点类型	NODENAME
元素节点的	标签名相同
属性节点的	属性名相同
文本节点的	#text
文档节点的	#document

注意：nodeName始终包含HTML元素的大写字母标签名

节点值(nodeValue)

节点类型	NODEVALUE
元素节点的	underfined或null
文本节点的	文本本身
属性节点的	属性值

节点类型(nodeType)

元素类型	NODETYPE
元素	1
属性	2
文本	3
注释	8
文档	9

节点操作

获取节点

• 通过ID获取节点（返回具体某个节点） getElementById(ID名)

• 通过标签名获取节点（返回节点数组，即使只有一个）

  getElementByTagName(标签名)

• 通过标签的name值获取节点（返回节点数组）

  getElementsByName(Name名)

• 通过class值来获取节点（返回节点数组）

  getElementsByClassName(Class名)

• 根据选择器返回找到结果集中的第一个

  querySelect("选择器")

• 根据选择器返回找到的结果集，是个节点数组

  querySelectAll("选择器")

<div id="box">box</div>                                
<p>p01</p>                                             
<p>p02</p>                                             
<p>p03</p>                                             
<div class="box">box1</div>                            
<div class="box">box2</div>                            
<div class="box">box3</div>                            
<input type="text" name="userName">                    
<script>                                               
    //通过id获取节点                                         
    var a = document.getElementById('box');            
    console.log(a);                                    
    a.style.color = "red";                             
                                                       
    //通过标签名获取节点                                        
    var b = document.getElementsByTagName('p');        
    console.log(b);                                    
    b[0].style.color = "blue";                         
    b[2].style.color = "red";                          
                                                       
    //通过name值获取                                        
    var c = document.getElementsByName("userName");    
    console.log(c);                                    
    c[0].value = "张撒谎";                                
                                                       
    //通过Class值获取节点                                     
    var d = document.getElementsByClassName("box");    
    console.log(d);                                    
                                                       
    //根据选择器返回找到结果集中的第一个                                
    console.log(document.querySelector("p"));  //标签    
    console.log(document.querySelector(".box")); //类   
                                                       
    //根据选择器返回找到的结果集，是个节点数组                             
    console.log(document.querySelectorAll("p"));  //标签 
  console.log(document.querySelectorAll(".box")); //类  
</script>       

创建DOM节点

• 创建元素节点

  document.createElement('已存在的标签名');

• 创建文本节点

  document.createTextNode('文本内容');

• 创建属性节点

  document.createAttribute('属性名');

  属性节点名.value = '属性值'; // 为属性设置值

• 关联以上三个节点

  元素节点名.appendChild(文本节点名);//在元素节点上添加文本节点

  元素节点名.setAttributeNode(属性节点名);//在元素节点上添加属性节点

• 将创建的节点添加到文档中

  document.body.appendChild(元素节点名);

//创建元素节点
    var a = document.createElement('p');
    console.log(a);
​
    //创建文本节点
    var b = document.createTextNode("该节点是动态创建的");
    console.log(b);
​
    //创建属性节点
    var c = document.createAttribute('class');
    c.value = 'wrapper';
    console.log(c);

插入节点

• 插入内部的尾部

  父节点.appendChild(创建的节点)

• 插入内部的某个前面

  父节点.insertBefore(创建的节点，已知的子节点)

替换节点

父节点.replaceChild(新节点，老节点)

克隆节点

• 深度克隆：包含子节点一起克隆

• 浅克隆：只会将找到的这个节点克隆，子节点不会克隆

需要被复制的节点：cloneNone（true/false）

true：复制当前节点以及所有字节点（深度克隆）；false：仅复制当前节点（浅克隆）

删除节点

• 删除当前节点及子节点

  节点.remove()

• 删除子节点

  父节点.removeChild(子节点)

节点属性操作

自定义属性必须是以data-开头

获取属性

getAttribute() --获取属性

语法：节点.属性名; //第一种 节点.getAttribute('属性名') //第二种

区别：第一种只能获取已经包含的属性，不能获取自定义属性;第二种 所有的属性都可以获取

设置属性

语法：

• 方法一：节点.属性名=属性值;

• 方法二：节点.setAttribute("属性名",属性值);

删除属性

两种方法

• 第一种：节点.属性名 = "";

  将属性名对于的属性值设置为空

• 第二种：节点.removeAttribute("属性名");

  将节点上对应的这个属性删除

<div id="box" data-str="前端教育" style="color: royalblue">教育</div>
​
<script>
    //获取节点属性
    var box = document.getElementById('box');
    console.log(box);
    console.log(box.id);
    // console.log(box.data-str);
    console.log(box.getAttribute('data-str'));
​
    //设置属性
    var a = document.getElementById('box');
    a.setAttribute("align",'center');
​
    console.log(a);
​
    //删除属性
    var box1 = document.getElementById("box");
    // console.log(box);
    // box.style = "";
    box.removeAttribute("style");
    console.log(box);
​
</script>

节点文本操作

获取文本

获取节点文本主要通过访问节点的属性来获得

• innerHTML

  语法：节点.innerHTML

  获取节点下的所有内容包含了标签

• innerText

  语法：节点.innerText

  获取节点下的文本内容，会过滤掉标签

• value

  语法：节点.value

  获取input输入框等表单的内容

  节点.getAttribute("value")

  value是表单输入框的属性，可以使用getAttribute获取value值

<div id="box">
    <p>前端开发教育</p>
</div>
<input type="text" value="前端" id="text">
<script>
    var box = document.getElementById('box');
    //获取文本
    console.log(box.innerHTML);
    console.log(box.innerText);
    var text = document.getElementById('text');
    console.log(text.value);
    console.log(text.getAttribute('value'));
​
</script>

设置文本

直接对属性进行赋值

语法：

• 节点.innerHTML = "文本内容"; //会翻译HTML标签

• 节点.innerText = "文本内容"; //不会翻译HTML标签

• 节点.value = 值;

• 节点.setAttribute("value",值);

注意：如果节点原本有内容，赋入内容后会把原来的内容覆盖掉

<div id="box"></div>
<input type="text" id="text1">
<br>
<input type="text" id="text2">
<script>
    //设置文本
    var box = document.getElementById('box');
    box.innerHTML = "<p>雷霆咆哮</p>";
    box.innerText = "<p>雷霆咆哮</p>";
​
    var t1 = document.getElementById('text1');
    t1.value = "雷霆";
    var t2 = document.getElementById('text2');
    t2.setAttribute("value","咆哮");
</script>

删除文本

删除文本内容可通过设置属性为空或者移除value属性来实现

语法：

• 节点.innerHTML = ""

• 节点.innerText = ""

• 节点.value = ""

• 节点.removeAttribute("value")

<div id="box">
    <p>雷霆咆哮</p>
</div>
<input type="text" id="text1" value = "雷霆">
<br>
<input type="text" id="text2" value = "咆哮">
<script>
    var box = document.getElementById("box");
    // box.innerHTML = "";
    box.innerText = "";
​
    var t1 = document.getElementById('text1');
    t1.value = "";
    var t2 = document.getElementById('text2');
    t2.removeAttribute("value");
</script>

DOM节点样式操作

操作样式class

可以通过操作节点class属性类获取属性或者设置节点的样式

语法：

• 获取

  节点.className #获取节点的所有class

  节点.getAttribute("class") #获取节点的所有class

• 设置[设置的值会将原来的值覆盖]

  节点.className = 值

  节点.setAttribute("class",值)

1、获取
<div id="box" class="red floatL"></div>
<script>
    var box = document.getElementById("box");
    console.log(box.className);
   console.log(box.getAttribute('class'));
</script>
​
2、设置

HTML5为元素提供了一个新的属性：classList实现对元素样式表的增删改查

语法：

• 节点.classList.add(value); #为元素添加指定的类

• 节点.classList.contains(value);

  判断元素是否含有指定的类，如果存在返回true

• 节点.classList.remove(value); #删除指定的类

• 节点.classList.toggle(value); #有就删除，没有就添加指定的类

操作具体样式

获取内联样式

style属性

定义：节点的style属性，包含所有的css属性；

通过访问这个对象下面具体的属性获取这个节点的某个内联样式内容

通过style属性下面的cssText属性，可以获取到这个节点的所有内联演示内容，返回的是字符串

语法：

• 节点.style.样式属性名 #获取某个具体的内联样式

• 节点.style.cssText #获取某个节点的所有内联样式，返回字符串

注意：访问某个节点的某个具体样式的时候，如果这个样式如font-size需要使用驼峰命名法写成fontSize

<div id="box" style="width: 100px;height: 50px;background-color: aqua;color: blueviolet">测试内容
</div>
</body>
<script>
    var box = document.getElementById('box');
    console.log(box.style.color);
    console.log(box.style.width);
    console.log(box.style.cssText);
</script>

设置内联样式

通过设置节点的style属性下面的属性，可以设置节点的某个内联样式

通过style属性下面的cssText属性，可以设置这个节点的使用内联样式

• 节点.style.样式属性名 = 属性值 #设置某个具体的内联样式

• 节点.style.cssText = 属性值或属性值列表 #设置某个节点的所有内联样式

<body>
<div  id="b1">设置背景颜色456</div>
<div  id="b2">设置字体颜色、字体大小、背景颜色</div>
<div id="box">雷霆咆哮</div>
​
</body>
<script>
    var box = document.getElementById('box');
    var b1 = document.getElementById('b1');
    var b2= document.getElementById('b2');
​
// 设置某个具体的内联样式
    box.style.backgroundColor = "red";
    b1.style.color = 'red';
​
 //设置某个节点的所有内联样式
    b2.style.cssText = "color:red;background-color:blue;font-size:25px";
​
</script>