DOM
来源：互联网 发布：迪杰斯特拉算法流程 编辑：程序博客网 时间：2024/05/30 23:53
1.1. DOM简介
全称Document Object Model，即文档对象模型。
DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，
组建好之后，按照树的结构将页面显示在浏览器的窗口中。
1.2. 节点层次
HTML网页是可以看做是一个树状的结构，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|--body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。
节点最多有一个父节点，可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。
document
代表当前页面的整个文档树。
访问属性
all
forms
images
links
访问方法(最常用的DOM方法)
<html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">// 获取dom 树, 获取document 对象.var dom = window.document;// all 获取页面中所有的标签节点 ,注释和文档类型约束.function testAll() {var allArr = dom.all;alert(allArr.length);for (var i = 0; i < allArr.length; i++) {//获取节点名称alert(allArr[i].nodeName);}}// anchors 获取页面中的所有的锚连接.function testAnchors() {var anArr = dom.anchors;alert(anArr.length);}// froms 获取所有的form 表单对象function testForms() {var formArr = dom.forms;alert(formArr.length);alert(formArr[0].nodeName);}// imagesfunction testImages() {var imageArr = dom.images;alert(imageArr.length);}// links 获取页面的超链接.function testLinks() {var linkArr = dom.links;//alert(linkArr.length);for (var i = 0; i < linkArr.length; i++) {//alert(linkArr[i].nodeName);}for (var i in linkArr) {alert(i);}}//testLinks();// 获取页面的Bodyvar body = dom.body;alert(body.nodeName);</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript</title></head><body onmousemove="test(this)"><img src="xxx" alt="这是一个美女"/><img src="xxx" alt="这是一个美女"/><img src="xxx" alt="这是一个美女"/><a href="http://www.baidu.com">百度一下</a><a href="http://www.google.com">百度两下</a><a href="http://www.baigu.com">百谷一下</a><a name="one"></a><a name="two"></a><form><label>姓名:</label><!--默认不写type 就是文本输入框--><input type="text"/></form></body></html>1.2. 获取节点对象案例
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
示例：
1，得到所有的div元素并显示信息（innerHTML）。
2，得到所有div元素中id为"test"的结果。
Var dom = window.document;function testByTagName() {var iptArr = dom.getElementsByTagName("input");for (var i = 0; i < iptArr.length; i++) {alert(iptArr[i].value);}}// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,//window.onload = testByTagName;//2，得到所有标签id为"username"的结果。获取旧value值并设置value值function testById() {var user = dom.getElementById("username");alert(user.value);user.value = "rose";}//testById();//3. 获取所有标签name 为like的元素.获取value值.function testByName() {var likeArr = dom.getElementsByName("like");for (var i = 0; i < likeArr.length; i++) {alert(likeArr[i].value);}}testByName();1.3 案例
显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue
1.3.1 属性操作练习
1，写一个form，其中有多个checkbox。
2，获取所有选中的数量。
3，实现全选与全不选的效果。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">function getSum(){/*需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。思路：1，先获取所有的checkbox对象。2，对这些对象进行遍历。判断哪个对象被选中。3，对被选中对象的金额进行累加。4，显示在按钮右边。*/var items = document.getElementsByName("item");var sum = 0;for(var x=0; x<items.length; x++){if(items[x].checked){sum += parseInt(items[x].value);}}var str = sum+"元";document.getElementById("sumid").innerHTML = str.fontcolor('red');}function checkAll(node){/*需求：通过全选checkbox，将其他条目都选中。思路：只要将全选checkbox的checked状态赋值给其他的item checked状态即可。*///var allNode = document.getElementsByName("all")[index];var items = document.getElementsByName("item");for(var x=0; x<items.length; x++){items[x].checked = node.checked;}}</script></head><body><div>商品列表</div><input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br /><input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br /><input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span></body></html>1.4. 通过节点关系查找节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
示例1：
firstChild属性最普遍的用法是访问某个元素的文本：
var text=x.firstChild.nodeValue;
示例2：
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
varx=document.getElementById("maindiv");
x.parentNode.removeChild(x);
