DOM
DOM:Document Object Model(文档对象模型)
用来将标记型文档封装成对象,并将标记型文档中的所有的内容(标签,文本,属性等)都封装成对象。封装成对象的目的是为了更方便操作这些文档中的所有内容,因为对象的出现可以有属性和行为被调用
- 文档:标记型文档
- 对象:封装了属性和行为的实例,可以直接被调用
- 模型:所有标记型文档都具备一些共性特征的一个体现
只要是标记型文档,DOM这种技术都可以对其进行操作,常见的标记型文档:(HTML、XML)要操作标记型文档必须对其进行解析
DOM技术的解析方式:dom解析将按照标签的层次关系体现出标签的所属,形成一个树状结构,称为DOM树,树中的标签以及文本甚至属性称为节点,这个节点也成为对象,标签通常也称为页面中的元素。
好处:可以对树中的节点进行任意操作,比如:增删改查
弊端:这种解析需要将整个标记型文档加载进内存
简介另一种解析方式: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个的父对象