本文介绍了javascript内置对象中的dom文档对象模型,在DOM中,文档有节点组成,节点的类型主要是包括元素节点,属性节点,文本节点,元素的属性不是元素的子节点。
DOM(document object modle )是指W3C定义的标准的文档对象模型。
在DOM中,文档有节点组成,节点的类型主要是包括元素节点,属性节点,文本节点。元素的属性不是元素的子节点
Node节点类型
Document 文件阶层中的根节点
Element 一个元素
Attr 一个属性,注意与其他节点类型不同,因为它们不是同一父节点的子节点
processingInstruction 处理命令
Comment 注释
Text 处于一个元素或一个属性中的文本内容(字符数据)
CDATASection 一块包含字符的文本区
Entity 实体
Node对象常用属性
Attributes 如果该节点是一个element,则以NamedNodeMap形式返回该元素的属性
childNodes 以node[]形式存放当前节点的子节点。
firstChild 以node[]形式放回当前节点的第一个子节点。没有则null
lastChild 以node[]形式放回当前节点的最后一个子节点。 没有则null
nextSibling 以node[]形式放回当前节点兄弟下一个子节点。 没有则null
nodeName 节点的名字,element节点则代表element的标记名称
nodeType 代表当前节点类型
parentNode 以node的形式返回当前节点的父节点
previousSibling 以node的形式返回紧凑当前节点,位于它之前的兄弟节点
Node对象常用方法
appendChild() 通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点
cloneNode(0 复制当前节点,或者复制当前节点以及它的所有子孙节点
hasChildNodes() 是否有子节点
insertBefore() 给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除再插入到它的位置
removeChild() 从文档树中删除并返回指定的子节点
replaceChild() 从文档树中删除并返回指定的子节点,用另一个节点替换它
访问文档中的对象
1.getElementsByTagName()方法
返回一个节点列表,可以通过使用方括号标记或使用item()方法来逐个访问这些节点
2.getElementsById()方法
3.getElementsByName()方法
创建节点
复制代码 代码示例:
createAtrribute() 用指定的名字创建新的Atrr节点
createComment() comment节点
CreateElement() element节点
createTextNode() textNode 节点
插入和添加节点
复制代码 代码示例:
appendChild() 通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点
insertBefore() 给文档树插入一个节点,位置在当前节点的指定子节点之前。
insertData() 在现有的文本节点中插入一个字符串
删除和替换节点
删除
removeChild()
deleteData() ---》从文本节点中删除指定范围的字符
替换
replaceChild()
replaceData() 替换一个文本节点的数据
对属性进行操作
复制代码 代码示例:
createAtrribute()
setAtrribute()
getAtrribute
removeAtrribute()
例子:
复制代码 代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
javascript dom对象演示实例-www.jb200.com</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<body>
<script language="javascript">
table =document.createElement("table");
thbody=document.createElement("tbody");
for(var i=0;i<3;i++){
tr=document.createElement("tr");
for(var j=0;j<3;j++){
td=document.createElement("td");
textcell=document.createTextNode("line ="+i+" column="+j);
td.appendChild(textcell);
tr.appendChild(td);
}
thbody.appendChild(tr);
}
table.appendChild(thbody);
document.body.appendChild(table);
table.setAttribute("border",2);
</script>
</body>
</html>