JavaScript-Dom
1.DOM：Document Object Model（文档对象模型）

2.dom节点之间的关系
dom节点之间是有子父关系之分，从而我们可以用层级树形结构方式描述

3.使用getElement系列方法访问指定节点
getElementById()、getElementsByName()、getElementsByTagName()，详情见上节课内容

4.根据层次关系访问节点
案例：

<!-- html部分 -->
<div id="appendDiv">
    <h3 id="c1">元素1</h3>
</div>

var father = document.getElementById("c1")
//1.访问当前节点的父级节点
var father = document.getElementById("c1").parentNode;
​
//2.得到指定元素的子元素集合
var childrens = document.getElementById("appendDiv").children;
//2.1 按照索引顺序访问指定子元素,如：访问第一个子元素
var c1 = document.getElementById("appendDiv").children[0];
​
//3.访问指定元素对象的第一个子元素
var c_1 = document.getElementById("appendDiv").firstElementChild;
​
//4.访问指定元素对象的末尾最后一个子元素
var f_1 = document.getElementById("appendDiv").lastElementChild;
​
//5.访问指定元素的同级别的下一个同级元素
var t_1 = document.getElementById("appendDiv").nextElementSibling;
​
//6.访问指定元素的同级别的上一个同级元素
var t_2 = document.getElementById("appendDiv").previousElementSibling;
5.节点信息
;
//获取到的节点都会有nodeName：节点名称  nodeType节点类型  nodeValue：节点值
var node = document.getElementById("c1");

其中最关键的就是了解节点值的描述

6.操作节点
6.1 操作节点的属性
控制节点显示、隐藏，可以操作style属性值从“display：block”变化为“display：none”则为消失，反之则为显示

function changeColor(){//鼠标移入时
    document.getElementById("dz1").setAttribute("style","display: none");
}
​
function changeColor2(){//鼠标移出时
    document.getElementById("dz1").setAttribute("style","display: block");
}

其中关键就在于如何访问和控制节点的属性

  1. getAttribute(“属性名”)；
  2. setAttribute(“属性名”,”属性值”)

6.2 创建节点和添加节点

//创建节点和添加节点
//1.创建元素
    var obj = document.createElement("h3");
    
    //1.1 给span标签设置内容
    obj.innerText = "添加元素1";
    console.dir(obj);
    
    //2.添加创建的节点到指定的元素之中
    /**
     * appendChild: 放置子元素在，子元素集合末尾添加
     */
    document.getElementById("appendDiv").appendChild(obj);
版权声明：本文为忙碌的高师傅原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/DQGonoes/p/16103822.html