js笔记整理5

DOM： 文档对象模型
数据结构：
线性: 单链表 循环链表 队列 栈 数组
树状：二叉树 平衡树 红黑树
网状：有向图 无向图 （寻路算法 A*算法）

DOM树

html文件对于人来说可以很清楚地看见所有的网页数据，但是机器并不能看懂。
此时就用到了DOM树，转化为浏览器能理解的数据结构，方便查找、修改、遍历等操作。
DOM实际上就是一个数据结构。
数据结构： 线性的(单链表，循环链表，栈，队列，数组)，树形的(二叉树，平衡树，红黑树)，网状的(有向图，无向图，(寻路算法，A*算法) )。

document 节点： 只有一个
下面有：标签节点 元素节点 文本节点

找节点的常用三种方式(定位方法)：
1.通过ID来查找
2.通过标签名字来查找
3.通过class来查找

通过id来查找：
在js里面ID具有唯一性
定义一个div标签的ID为div1，既可以通过id来查找div
var div1 = document.getElementById(“div1”);（获取到节点）

通过标签名来查找： 假设网页中有两个

标签。同一个标签的class可以写多个。
var ps = document.getElementsByTagName(“p”); 返回的是一个数组。
var p1 = ps[0]; 获取到第一个p节点。

通过Class来查找： 假设有两个class都叫txt
document.getElementByClassName（“txt”）; 也是返回数组。

通过ID查找获取到的直接是一个节点。
通过Tag和Class查找得到的一定是数组，就算只有一个也是数组。

通过ID查找一定要有document。tag和class可以在任一标签结点上使用。
可以用比如div1.getElementsByClassName(“txt1”); 可以不用document。

创建节点 添加节点到DOM树 删除节点
var div1 = document.getElementById(“div1”);
创建一个p标签
var p = document.cre.createElement(“p”);
添加到div1里面去：
div1.appendChild§;
创建一个文本节点：
var p1txt = document.createTextNode(“p1”);
p.appendChild(p1txt);
(将文本节点添加到了p节点里面)

删除div2

删除节点： removeChild();
第一种(根据父节点删除)
var div2 = document.getElementById(“div2”); //先获取到div2
div1.removeChild(div2); //div1里面删除 div2（这种方法要先找到div2的父类div1）
第二种(自己删除自己)
div2.parentNode.removeChild(div2);

对节点的属性、内容进行操作：
对于html中已经定义好的属性，可以用对象的形式来进行获取和修改。
var img1 = document.getElementById(“img1”);
换图片：img1.src = “qiuqiu.jpg”;

修改class的值
若想修改class的值，只能用className(因为class在js中属于关键词)
CSS样式的修改和添加：
比如img.style.color = “black”;

获取属性：
img1.getAttribute(""); //获取img的属性

设置属性的值：
img1.setAttribute("",""); 第一个引号是属性名，第二个引号是属性值。
img1.removeAttribute("")引号里面是要删除的属性名称。
img1.setAttribute("",""); 要添加的属性名和属性值。

修改标签下面的文本内容：
先获取节点：
var p1 = document.getElementById(“p1”);
p.innerHTML = “”; (获取p标签内的所有内容,可以进行替换和添加)
innerHTML添加的是属于HTML的代码，比如可以在里面写标签，链接等，都是可以生效的。
添加纯文本：p1.textContent = “”;