DOM
DOM：Document Object Model（文档对象模型）
用来将标记型文档封装成对象，并将标记型文档中的所有的内容（标签，文本，属性等）都封装成对象。封装成对象的目的是为了更方便操作这些文档中的所有内容，因为对象的出现可以有属性和行为被调用
- 文档：标记型文档
- 对象：封装了属性和行为的实例，可以直接被调用
- 模型：所有标记型文档都具备一些共性特征的一个体现
只要是标记型文档，DOM这种技术都可以对其进行操作，常见的标记型文档：（HTML、XML）要操作标记型文档必须对其进行解析
DOM技术的解析方式：dom解析将按照标签的层次关系体现出标签的所属，形成一个树状结构，称为DOM树，树中的标签以及文本甚至属性称为节点，这个节点也成为对象，标签通常也称为页面中的元素。
好处：可以对树中的节点进行任意操作，比如：增删改查
弊端：这种解析需要将整个标记型文档加载进内存
DOM解析文档.png
简介另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准
SAX解析方式：基于事件驱动的解析
- 好处：获取速度非常快
- 弊端：无法进行增删改
如果仅仅只是查询，可以使用SAX
DOM的三层模型
DOM level 1：将html文档封装成对象
-
DOM level 2：在level 1基础上加入了新功能，比如解析名称空间（可以使用域名来标识）
<html xmlns = "my"> <table></table> </html> <html xmlns = "you"> <table></table> </html> DOM level 3：将xml文档封装成对象
DHTML
动态的html，不是一门语言：是多项技术综合体的简称（HTML，CSS，JavaScript，DOM）
-
HTML：负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作
简述：用标签封装数据
-
CSS：负责提供样式属性，对标签中的数据进行样式的定义
简述：对数据进行样式定义
-
DOM：负责将标签型文档以及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作
简述：将文档和标签及其他内容变成对象
-
JavaScript：负责提供程序设计语言，对页面中的对象进行逻辑操作
简述：页面的行为定义，页面的动态效果，是动态效果的主力编程语言
DHTML + XMLhttpRequest = AJAX
BOM模型
BOM：Browser Object Model（浏览器对象模型）这个模型方便操作浏览器
浏览器对应的对象就是window对象，可以通过查阅DHTML api获得
<input type = "button" value = "演示window对象" onclick = "windowDemo()" />
<script type = "text/javascript">
function windowDemo(){
// 获取浏览器信息navigator
var name = window.navigator.appName;
var version = navigator.appVersion; // window可以省略
document.write(name + ":" + version);
}
function windowDemo1(){
// 演示地址栏 location
var pro = location.protocol; // file
var text = location.href; // file:///E:/demo.html
// 给location的href属性设置一个值。改变了地址栏的值，并对其进行了解析，如果是http，还进行连接访问
location.href = "http://www.baidu.com";
document.write(pro);
}
function windowDemo2(){
// 确认点击弹窗
var b = confirm("are you sure onClick!");
alert(b);
// 设置闹钟
var id = setTimeout("alert('time run')", 4000); // 4s后执行
var id1 = setInterval("alert('Interval run')", 3000); // 每3s执行一次
clearInterval(id1);
clearTimeout(id);
}
function windowMove(){
moveBy(10,10); // 每次点击，窗口移动x = 10, y = 10
moveTo(40,50); // 移动到指定位置
}
function windowOnunload(){
onunload = function(){ // 3
alert("unload run");
}
onload = function(){ // 1
alert("load run");
window.status = "a load is finish"
}
onbeforeunload = function(){ // 2
alert("before unload run");
}
}
</script>
练习：广告弹窗
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
<title>test</title>
</head>
<body>
<script type = "text/javascript">
/**
* 弹窗广告效果，页面一加载完就执行
*/
onload = function(){
open("./AD.html", "_blank","height = 300, width = 400, status = no, toolbar = no, location = no");
}
// 一分钟获取一次焦点
setInterval("focus()", 1000);
</script>
</body>
</html>
Document对象
该对象将标记型文档进行封装，该对象的作用，是对可以标记型文档进行操作
最常见的操作：想要实现动态效果，需要对节点操作，那么要先获取到这个节点。要想获取节点，就必须先要获取到节点所属的文档对象document
获取节点的方法体现
-
getElementById()：通过标签的id属性值，获取该标签节点。返回该标签节点 -
getElementsByName()：通过标签的name属性，获取该节点。因为name有相同，返回该节点数组 -
getElementsByTagName()：通过标签名，获取该标签节点。因为标签名会重复，返回该标签数组 - 凡是带s返回的都是数组
- 常见节点有三种：
- 标签节点：类型 1
- 属性节点：类型 2
- 文本节点：类型 3
- 标签型节点是没有值的，属性和文本节点是可以有值的
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<title>document</title>
</head>
<body>
<div id = "hh">11111111111111111</div> <!-- getElementById -->
<input type = "texy" name = "user" /> <!-- getElementsByName -->
<a href = "http://www.baidu.com">百度</a> <!-- getElementsByTagName -->
<a href = "http://www.baidu.com">百度1</a>
<a href = "http://www.baidu.com">百度2</a>
<div id = "news">
<a href = "http://www.baidu.com">百度</a>
<a href = "http://www.baidu.com">百度1</a>
<a href = "http://www.baidu.com">百度2</a>
</div>
<input type = "button" value = "演示document获取节点" onclick = "getNodeDemo()" />
<script type = "text/javascript">
function getNodeDemo(){
var hhNode = document.getElementById("hh");
console.log(hhNode.nodeName + hhNode.nodeType + hhNode.nodeValue);
// 获取div中的文本
var text = hhNode.innerHTML; // 11111111111111111
// 修改div中的文本
hhNode.innerHTML = "hhhhhhhhhhhhhhh".fontcolor("red");
---------------------------------------------------------------------------
var nodes = document.getElementsByName("user");
console.log(nodes[0].type + nodes[0].value); // text 文本框写啥拿啥
var userNode = document.getElementsByName("user")[0]; // 须保证name = user 只有唯一一个
---------------------------------------------------------------------------
var aNode = document.getElementsByTagName("a");
console.log(aNode[0].innerHTML);
// 给所有超链接设置新窗口打开
for(var i = 0; i < aNode.length; i++){
aNode[i].target = "_blank";
}
// 给部分超链接设置打开新窗口
var newNode = document.getElementById("news");
var newArrNode = newNode.getElementsByTagName("a");
for(var i = 0; i < newArrNode.length; i++){
newArrNode[i].target = "_blank";
}
}
</script>
</body>
</html>
通过节点的层次关系获取节点
- 父节点：
parentNode对应一个节点对象 - 子节点：
childNodes对应一个节点集合，只包含下一层子节点，没有孙子节点 - 兄弟节点：尽量少用兄弟节点，
- 上一个兄弟节点：
previousSibling - 下一个兄弟节点：
nextSibling
- 上一个兄弟节点：
<html>
<head>
<title>title</title>
</head>
<body>
<input type = "botton" value = "click" />
<div>div区域</div>
<table id = "table">
<tr>
<td>d1</td>
<td>d2</td>
</tr>
</table>
<dl>
<dt>up</dt>
<dt>down</dt>
</dl>
<script type = "text/javascript">
function getNodeByLevel(){
// 获取页面中的表格节点
var tableNode = document.getElementById("table");
// 获取父节点
var pNode = tableNode.parentNode; // body节点
// 获取子节点
var cNode = tableNode.childNodes; // tbody
// 获取孙子
var cNode = cNode[0].childNodes[0].nodeName; // tr
}
</script>
</body>
</html>
节点操作
- 创建并添加
- 删除
- 修改
<div id = "1"> </div>
<div id = "2">22222222</div>
<div id = "3">33333333</div>
<div id = "4">44444444</div>
<input type="botton" value = "创建并添加节点" onclick = "creatAndAdd()" />
<input type="botton" value = "删除节点 " onclick = "del()" />
<input type="botton" value = "修改节点" onclick = "update()" />
<script type = "text/javascript">
// 增
function creatAndAdd(){
// 1.创建文本节点/按钮节点
var text = document.createTextNode("这是一个新节点")
var botton = document.createElement("input");
botton.type = "botton";
botton.value = "click";
// 2.获取1节点
var div1Node = document.getElementById("1");
// 3.添加到1节点中
div1Node.appendChild(text);
div1Node.appendChild(botton);
}
function creatAndAdd1(){
var div1Node = document.getElementById("1");
div1Node.innerHTML = "hahahahaha";
div1Node.innerHTML = "<input type = 'botton' value = 'newClick' />";
}
// 删
function del(){
// 获取2节点
var div2Node = document.getElementById("2");
// 删除2节点
div2Node.removeNode(false); // true：递归删除节点下所有内容 该方法较少使用
// 一般使用removeChild方法
div2Node.parentNode.removeChild(div2Node);
}
// 改
function update(){
// 获取1，3节点
var div1Node = document.getElementById("1");
var div3Node = document.getElementById("3");
// 用3替换1节点
// div1Node.replaceNode(div3Node); // 该操作会把原来的3搬到1位置上，3位置消失
div1Node.parentNode.replaceChild(div3Node,div1Node);
// 3不动，复制一份到1上
var div3Copy = div3Node.cloneNode(true); // true:递归克隆节点下所有内容 该方法较少使用
div1Node.parentNode.replaceChild(div3Copy,div1Node);
}
</script>
核心DOM模型
- Document：文档对象
- 创建（获取）：在HTML DOM模型中可以使用window对象来获取
- window.document
- document
- 方法：
- 获取Element对象：
-
getElementById()：查找具有指定的唯一id的元素，id属性一般唯一 -
getElementsByTagName()：根据元素名称获取元素对象集合，返回数组 -
getElementsByClassName()：根据Class属性值获取元素对象集合，返回数组 -
getElementsByName()：根据name属性值获取元素对象集合，返回数组
-
- 创建其他DOM对象：
- 获取Element对象：
- 属性
- 创建（获取）：在HTML DOM模型中可以使用window对象来获取
- Element：元素对象
- 获取/创建：通过document来获取和创建
- 方法：
-
removeAttribute()：删除属性 setAttribute（）
-
- Node：节点对象，其他5个的父对象
