DOM
2018-03-06 本文已影响0人
追逐_chase
timg.jpg
JS有三部分组成
- ECMAscript(欧洲计算机制造商协会) ： 描述了JS的语法和基本对象的规范
- DOM：文档对象模型，处理网页的内容方法和接口
- BOM ：浏览器对象模型，浏览器交互的方法和接口
DOM
- DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
目的其实就是为了能让js操作html元素而制定的一个规范。
dom树.gif
节点
- 整个文档是一个文档节点
- 每一个html元素是元素节点
- html元素内的文本是文本节点
- 每个html属性是属性节点
节点访问
- getElementById() id 访问节点
- getElementsByTagName() 标签访问节点
- getElementsByClassName() 类名 有兼容性问题
节点的关系
- 父节点 parentNode
- 子节点 (child）
- firstChild 第一个孩子 ie678
- firstElementChild 第一个孩子 正常浏览器
- lastChild
- lastElementChild
- 所有的子节点
- childNodes 选出全部的孩子(在IE 浏览器可以，但是在谷歌火狐浏览器，换行也算是节点) 所以 利用 nodeType == 1 时才是元素节点 来获取元素节点
child.png
- child 选取所有的孩子 （只有元素节点） 但是在IE678上 户包含注释节点，需要注意一下
- 同胞(兄弟)节点( sibling)
- 下一个兄弟
- nextSibling ie 678 认识
- nextElementSibling 其他浏览器
- 上一个兄弟
- previousSibling
-
previousElementSibling
xiongdi.png
- 下一个兄弟
xiongdi.png
节点的操作
创建节点
创建一个 li节点
var lis = document.createElement("li");
插入节点
- appendChild(); 添加孩子 append 添加的意思 意思： 添加孩子 放到盒子的 最后面。
- insertBefore(插入的节点，参照节点) 子节点 添加孩子 放在参照节点的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的操作</title>
</head>
<body>
<ul id="ull">
<li id="lii">哈哈</li>
<li>这是谁</li>
<li>不被</li>
<li>你呢</li>
<li>不说</li>
</ul>
<script>
//获取元素
var ul = document.getElementById("ull")
//创建节点
var lis = document.createElement("li");
//设置文字
lis.innerHTML = "这是创建的一个节点";
//插入节点--盒子的最后面
ul.appendChild(lis);
//创建节点
var newLi = document.createElement("li");
newLi.innerHTML = "插入一个新的节点 排在最前面";
var lis = document.getElementById("lii");
ul.insertBefore(newLi,lis)
</script>
</body>
</html>
节点.png
删除节点
- removeChild() 孩子节点
克隆节点
- cloneNode();
- 括号里面可以跟参数 ， 如果 里面是 true 深层复制， 除了复制本盒子，还复制子节点
- 如果为 false 浅层复制 只复制 本节点 不复制 子节点。
节点属性
- getAttribute(属性) 获取节点属性
var scroll = document.getElementById("scroll");
alert(scroll.getAttribute("class"));
- 设置节点属性
- setAttribute("属性","值");
div.setAttribute("class","demo");
- 删除属性
- removeAttribute(“属性”);
