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基础上加入了新功能，比如解析名称空间(可以使用域名来标识)

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获得

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");

}

}

练习：广告弹窗

test

/**

* 弹窗广告效果，页面一加载完就执行

*/

onload = function(){

open("./AD.html", "_blank","height = 300, width = 400, status = no, toolbar = no, location = no");

}

// 一分钟获取一次焦点

setInterval("focus()", 1000);

Document对象

该对象将标记型文档进行封装，该对象的作用，是对可以标记型文档进行操作

最常见的操作：想要实现动态效果，需要对节点操作，那么要先获取到这个节点。要想获取节点，就必须先要获取到节点所属的文档对象document

获取节点的方法体现

getElementById()：通过标签的id属性值，获取该标签节点。返回该标签节点

getElementsByName()：通过标签的name属性，获取该节点。因为name有相同，返回该节点数组

getElementsByTagName()：通过标签名，获取该标签节点。因为标签名会重复，返回该标签数组

凡是带s返回的都是数组

常见节点有三种：

标签节点：类型 1

属性节点：类型 2

文本节点：类型 3

标签型节点是没有值的，属性和文本节点是可以有值的

document

百度

百度1

百度2

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";

}

}

通过节点的层次关系获取节点

父节点：parentNode对应一个节点对象

子节点：childNodes对应一个节点集合，只包含下一层子节点，没有孙子节点

兄弟节点：尽量少用兄弟节点，

上一个兄弟节点：previousSibling

下一个兄弟节点：nextSibling

title

d1

d2

updown

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

}

节点操作

创建并添加

删除

修改

// 增

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 = "";

}

// 删

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);

}

核心DOM模型

Document：文档对象

创建(获取)：在HTML DOM模型中可以使用window对象来获取

window.document

document

方法：

获取Element对象：

getElementById()：查找具有指定的唯一id的元素，id属性一般唯一

getElementsByTagName()：根据元素名称获取元素对象集合，返回数组

getElementsByClassName()：根据Class属性值获取元素对象集合，返回数组

getElementsByName()：根据name属性值获取元素对象集合，返回数组

创建其他DOM对象：

属性

Element：元素对象

获取/创建：通过document来获取和创建

方法：

removeAttribute()：删除属性

setAttribute()

Node：节点对象，其他5个的父对象