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 = “”;