DOM学习笔记

最新推荐文章于 2024-08-07 17:12:09 发布

哲里菲桦

最新推荐文章于 2024-08-07 17:12:09 发布

阅读量287

点赞数

本文链接：https://blog.youkuaiyun.com/u013951373/article/details/21511689

版权

DOM: document object model 文档对象模型

就是将一些标记型的文档以及文档中的内容当成对象，对对象定义属性和行为，

方便操作

dom三层模型

dom1:将html文档封装成对象。

dom2：将xml文档封装成对象。

om3：将xml文档封装成对象。

DHML 是动态html。是多个技术html、css、dom 、javascript 的综合体

Html：将数据进行封装。

Dom：将标签封装成对象。

Css：负责标签中数据的样式。

Javascript：将三个进行融合，通过程序设计方式来完成动态效果的操作。

html, xhtml, xml都是标记型文档。

标签之间存在着层次关系。

window

...

document

html

---|--head

--------|--title

--------|--base

--------|--link

---|--body

--------|--div

--------|--form

------------|--input

------------|--select

--------|--a

--------|--table

...

这种树形结构，加载进内存的是一颗DOM树，这些标签及其数据就是这棵树的节点

DOM对已标记型文档的解析有个弊端，文档过大消耗资源，对于大文档可使用SAX方式解析

节点类型：

标签型节点：类型：1.

文本型节点：类型：3.

属性节点：类型2.

注释型节点：类型 8.

Document：类型 9.

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取时要注意。

节点关系：父节点：parentNode

子节点：childNode：直接子节点，返回的时一个对象集合

兄弟节点：

上一个兄弟节点：previousSibling

下一个兄弟节点：nextSibling

获取节点可以通过节点的层次关系完成，也可以通过document对象来完成。

getElementById	获取对 ID 标签属性为指定值的第一个对象的引用。
getElementsByName	根据 NAME 标签属性的值获取对象的集合。
getElementsByTagName	获取基于指定元素名称的对象集合。没有id也没有name，通过标签名来获取节点对象。

Dom编程：

1.定义界面：

通过html的标签将数据进行封装。

2.定义一些静态的样式。

通过css

3.需要动态的完成的和用户的交互：

a) 先明确事件源。

b) 明确事件将事件注册到事件源上。

c) 通过javascript的函数对事件进行处理。

d) 在处理过程需要明确处理的区域。

下面是一些dom事例：

<!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 demo()
{
var divobj = document.getElementById("divid");
//divobj.style.backgroundColor = "red";//样式对象(dom中)

/*
var name =divobj.nodeName;
var type =divobj.nodeType;
var value =divobj.nodeValue;
alert("name="+name+",type="+type+",value="+value);
*/

//获取父节点
var parent =divobj.parentNode;
getNodeInfo(parent);

//获取子节点
var childs =divobj.childNodes;
//alert(childs.length);
//getNodeInfo(childs[0]);//div中的文本节点

//获取兄弟节点
var preNode = divobj.previousSibling; //上一个兄弟节点
//getNodeInfo(preNode);
var nexNode = divobj.nextSibling; //下一个兄弟节点
//getNodeInfo(nexNode);

//获取格一文本
var tabNode = divobj.nextSibling.nextSibling;
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0]); //太麻烦
var tdNodes = tabNode.getElementsByTagName("td");
//getNodeInfo(tdNodes[0].childNodes[0]);
}

function getNodeInfo(node)
{
alert("name="+node.nodeName+",type="+node.nodeType+",value="+node.nodeValue);
}

var info ="";
function getDocAll()
{
var nodes=document.all;
for(var x=0;x<nodes.length;x++)
{
//getNodeInfo(nodes[x]);
info += nodes[x].nodeName+","+nodes[x].nodeType+"<br/>";

}
// var node=document.all(7);
//getNodeInfo(node)
document.write(info);
}

//通过递归获取节点的层次关系
var str ="";
function listNode(node,level)
{
printInfo(node,level);
level++;
var nodes =node.childNodes;
for(var x=0;x<nodes.length;x++)
{
if(nodes[x].hasChildNodes())
listNode(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function getSpace(level)
{
var s="";
for(var x=0;x<level;x++)
{
s +="|----";
}
return s;
}
function printInfo(node,level)
{
str +=getSpace(level)+"name="+node.nodeName+",type="+node.nodeType+",value="+node.nodeValue+"<br/>";

}

function getNodes()
{
listNode(document,0);
document.write(str);
}
</script>
</head>
<body>
<input type="button" value="演示1" οnclick="demo()" />
<input type="button" value="演示2" οnclick="getDocAll()" />
<input type="button" value="演示3" οnclick="getNodes()" />
<div style="background-color:#0F0" id="divid">
fasd
</div>
<table>
<tr>
<td> 格一</td>
<td> 格二</td>
</tr>
<tr>
<td> 格一</td>
<td> 格二</td>
</tr>
</table>
<a href="www.icbc.com.cn">工商银行</a>
</body>
</html>