JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

一丶DOM树

      DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

      DOM就是由节点组成的：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树.如下图

# 在HTML中,一切皆节点. 一切皆节点对象
# 结构:
	# 元素节点: HTML标签
	# 文本节点: 标签中的文字
	# 属性节点: 标签的属性

# 利用dom可以操作以下:
	找对象(元素节点)
	设置元素的属性值
	设置元素的样式
	动态创建和删除元素
	事件的触发:事件源,事件,事件的驱动程序

二丶节点查找(直接查找和间接查找)

直接查找:

      DOM节点的获取方式其实就是获取事件源的方式

​      操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：

//方式一：通过id获取单个标签
	var div1 = document.getElementById("box1");  

//方式二：通过 标签名 获得 标签数组，所以有div
	var arr1 = document.getElementsByTagName("div");   

//方式三：通过 类名 获得 标签数组，所以有p1类
	var arr2 = document.getElementsByClassName("p1");
//----- div1 ,arr1,arr2 都是对象

//其中方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。
//即便如此，这一个值也是包在数组里的。这个值的获取方式如下：
    document.getElementsByTagName("div1")[0];    //取数组中的第一个元素
    document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

间接查找:

​      可以查找当前节点的 子父节点 ,兄弟节点 . 如下图