文档对象模型DOM概述及DOM树

来源：互联网发布：淘宝自创品牌要多少钱编辑：程序博客网时间：2024/04/28 10:03

1.Dom概述

* 什么是DOM

docuemnt object model 文档对象模型

* 它的作用

重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目

* 分类

Core DOM : 定义了一套标准的针对任何结构化文档的对象
XML DOM : 定义了一套标准的针对 XML 文档的对象
HTML DOM : 定义了一套标准的针对 HTML 文档的对象。

*.xml介绍

expensible markup language : 可扩展标记语言.

<penson>

<name>张无忌</name>
<age>23</age>

</person>

2.DOM树

* 结点 :

文档中的每个成分都是一个节点.(包括文本也是节点)

*.结点的属性

a. nodeName（节点名称）

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

b. nodeValue（节点值）

对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。

c. nodeType（节点类型） : nodeType 属性可返回节点的类型。

标签节点的类型值是 1
属性节点的类型值是 2
文本节点的类型值是 3

<title>DOM节点的属性</title> </head> <body><p id = "p">你好</p><script type="text/javascript"><!--var p = document.getElementById("p") ;alert(p.nodeName + " :" + p.nodeValue + ":" + p.nodeType) ; //P:null:1//--></script> </body></html>

*. 结点的分类

整个文档是一个文档节点
每个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释属于注释节点

*.结点的关系

只有父子和兄弟关系

parentNode : 父节点
childNodes ：所有的子标签
firstChild ：第一个儿子
lastChild 　：最后一个儿子
nextSibling ：下一个兄弟节点
previousSibling ：　上一个兄弟节点

<title>节点导航</title> </head> <body><table><tr><td>刘德华</td><td>男</td><td>50</td></tr><tr><td>成龙</td><td>男</td><td>60</td></tr><tr><td>小龙女</td><td>女</td><td>18</td></tr></table><script type="text/javascript">//示例： 拿到成龙的年龄//拿到根节点var root = document.documentElement ; //HTML//alert(root.nodeName) ;//拿到body节点var body = root.lastChild ; //BODY//alert(body.nodeName) ;//拿到table节点var table = body.firstChild ; //TABLE//拿到tbody节点 var tbody = table.firstChild ; //TBODY//拿到成龙的年龄var age = tbody.firstChild.nextSibling.lastChild.firstChild.nodeValue ;alert(age);</script> </body></html>

<title>Document</title> </head> <body><input type="text" name="name" id = "txt"><script type="text/javascript"><!--//拿到文本框对象var txt = document.getElementById("txt") ;//拿到属性节点var atts = txt.attributes ;//拿到name属性的值//alert(atts[1].nodeValue) ;for(var i = 0 ;i<atts.length ;i++){alert(atts[i].nodeName + ":" + atts[i].nodeValue) ;}//--></script> </body></html>

*. 对结点进行CRUD操作

*.查找结点

两种方式：

a. 采用节点之间的关系去拿根节点： document.documentElement ;

b. 采用方法去拿

getElementById() : 根据标签的ID拿到此标签节点
getElementsByTagName() : 根据标签的名字拿到此标签节点数组
getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。

<title>获取标签节点对象的方法</title> </head> <body> <p name = "p">你好</p> <input type="text" name="username"><br> <input type="text" name="username"><br> <input type="text" name="username"><br> <script type="text/javascript"> <!--   //采用document.getElementById()   //第二种方法   //document.getElementsByName: 只能用于表单对象  /* var p = document.getElementsByName("p") ;   //alert(p.length) ;  //拿不到var inputs = document.getElementsByName("username") ;//alert(inputs.length) ;inputs[1].value = "你好" ;*///第三种方式var ps = document.getElementsByTagName("p") ;//alert(ps.length) ;alert(ps[0].firstChild.nodeValue) ; //--> </script> </body></html>

<title>Document</title> </head> <body><h1 id = "h1">明天休息</h1><script type="text/javascript"><!--//示例： 拿到明天休息的文本//第一种方法//var h1 = document.getElementById("h1") ;//第二种方式var h1 = document.getElementsByTagName("h1") ;alert(h1[0].innerHTML) ;//alert(h1.innerHTML) ;//alert(h1.firstChild.nodeValue) ;//alert(h1.lastChild.nodeValue) ; //alert(h1.innerText) ;//--></script> </body></html>

<title>Document</title> </head> <body>   <ul><li id="bj" value="beijing">北京<h1>海淀</h1>奥运</li><li id="sh" value="shanghai">上海</li><br/><input type="button" value="li取值" onclick="getLi()"/></ul><script type="text/javascript"><!--function getLi(){//拿到北京节点var li = document.getElementById("bj") ;//拿到北京节点的所有儿子var childs = li.childNodes ;for(var i = 0 ; i<childs.length ;i++){//alert(childs[i].nodeName + ":" + childs[i].nodeValue + ":" + childs[i].nodeType ) ;if(childs[i].nodeType == 1){alert(childs[i].firstChild.nodeValue) ;}else{alert(childs[i].nodeValue) ;}}}//--></script> </body></html>

<title>获取下拉框的文本的值</title> </head> <body><select name="edu" id="edu"><option value="本科">本科</option><option value="专科">专科</option><option value="高中">高中</option><option value="小学">小学</option><option value="幼儿园">幼儿园</option></select><script type="text/javascript"><!--var ops = document.getElementsByTagName("option") ;for(var  i =0 ; i<ops.length ;i++){//alert(ops[i].text) ;alert(ops[i].innerHTML) ;}//--></script> </body></html>

*.删除结点

removeChild() : 采用父节点删除子节点

*创建节点：

document.createElement() : 创建一个标签节点
docuemnt.createTextNode("内容") ：创建一个文本节点
节点的setAttribute() :添加属性节点

<title>添加表格行</title> </head><script type="text/javascript"><!--function addtr(){//拿到填写的信息var name = document.getElementById("name").value ;var email = document.getElementById("email").value ;var age = document.getElementById("age").value ;//创建一个行及4个单元格var tr = document.createElement("tr") ;//创建4个单元格，并赋值var nameTd = document.createElement("td") ;nameTd.innerHTML = name ;var emailTd = document.createElement("td") ;emailTd.innerHTML = email ;var ageTd = document.createElement("td") ;ageTd.innerHTML = age ;var btnTd = document.createElement("td") ;btnTd.innerHTML = "<button onclick = 'delTr(this)'>删除</button>" ;//组合各个控件“”tr.appendChild(nameTd) ;tr.appendChild(emailTd) ;tr.appendChild(ageTd) ;tr.appendChild(btnTd) ;//拿到第二个表格对象var table = document.getElementsByTagName("table")[1] ;//将创建的新行添加到tbody中table.firstChild.appendChild(tr);}function delTr(btn){//删掉行//采用removeChild()//父亲(tbody)干掉儿子(tr)//拿到曾爷爷var tbody = btn.parentNode.parentNode.parentNode ;//拿到爷爷var tr =  btn.parentNode.parentNode ;//曾爷爷干掉爷爷tbody.removeChild(tr);}//--></script> <body>   <table width = 600 height = 100 align = center>      <tr><td>姓名:</td><td><input type="text" name="" id = "name"></td><td>邮箱:</td><td><input type="text" name="" id = "email"></td><td>年龄</td><td><input type="text" name="" id = "age"></td>      </tr>      <tr><td align = "center" colspan = "6"> <input type="button" value="添加" onclick="addtr()"></td>      </tr>      </table>  <br>  <br>  <br>  <br>  <hr>  <table width = "500" border =1 align = center>  <tr><td>姓名</td><td>邮箱</td><td>年龄</td><td>操作</td>  </tr>  </table>

*.添加结点

appendChild() : 添加子节点

<title>添加下拉框选项</title> </head><script type="text/javascript"><!--function addOptions(){//创建一个新的节点//第一种方式/*var option = document.createElement("option") ;option.value = "小学" ;option.text = "小学" ;//或者通过创建option的方式：/* var option = new Option() ;  option.text = "小学" ;  //text：设置或返回某个选项的纯文本值。  option.value = "小学" ;*/  //value：设置或返回被送往服务器的值。//拿到下拉框，加入小学document.getElementsByTagName("select")[0].options.add(option) ;*///options集合可返回包含 <select> 元素中所有 <option> 的一个数组。//第二种方式//获得select对象//var select = document.getElementsByTagName("select")[0] ;//select.innerHTML = select.innerHTML + "<option value = '小学'>小学</option>" ;//第三种var option = document.createElement("option") ;option.value = "小学" ;option.text = "小学" ;//获得select对象var select = document.getElementsByTagName("select")[0] ;select.appendChild(option); }function fun(){//拿到div对象var d = document.getElementById("d") ;//创建一个img标签对象var img = document.createElement("img") ;//指定属性img.src = "images/1.jpg" ;img.style.width = "200px" ; //css中的属性 ，必须带单位img.height = "300" ; //html中的属性，可以不要单位//将图片添加到div标签中d.appendChild(img) ;}//--></script> <body><input type="button" value="添加选项" onclick="addOptions()"/><input type="button" value="添加一副图片" onclick="fun()"><select><option>本科</option><option>专科</option><option>高中</option><option>初中</option></select><div id = "d"></div> </body></html>

*.修改或替换结点

replaceNode(): 替换节点(适用于IE)

replaceChild() : 替换子节点

<title>替换节点的操作</title> </head><script type="text/javascript"><!--function changeNode(){//拿到北京节点var bjNode = document.getElementById("bj");//拿到打灰机对象var gameNode = document.getElementById("game");//替换//bjNode.replaceNode(gameNode) ;//bjNode.parentNode.replaceChild(gameNode,bjNode) ;//克隆一份打灰机var node = gameNode.cloneNode(true) ;//布尔类型的参数：true:连内容一起复制//false：只复制标签 ，不复制内容bjNode.parentNode.replaceChild(node,bjNode) ;}//--></script> <body> <ul ><li id="bj" onclick="changeNode()">北京</li><li>湖南</li><li>山东</li></ul><ul><li  id="game">打<p>灰机</p></li><li>抓泥鳅</li><li>斗地主</li></ul> </body></html>

<title>Document</title> </head><script type="text/javascript"><!--function checkAll(flag){//拿到所有的多选框var hobbys = document.getElementsByName("hobby") ;//循环赋值for(var i =0 ;i<hobbys.length ;i++){hobbys[i].checked = flag ;}}function reverseCheck(){//拿到所有的多选框var hobbys = document.getElementsByName("hobby") ;//循环赋值for(var i =0 ;i<hobbys.length ;i++){hobbys[i].checked = !hobbys[i].checked ;}}//--></script> <body>   <h1>请选择你的爱好：</h1>  全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/> <input type="checkbox" name="hobby" value="football"/>足球 <input type="checkbox" name="hobby" value="basketball" />篮球 <input type="checkbox" name="hobby" value="swim" />游泳 <input type="checkbox" name="hobby" value="singing"/>唱歌<br/> <input type="button" value="全选" onclick="checkAll(true)"/> <input type="button" value="全不选" onclick="checkAll(false)"/> <input type="button" value="反选" onclick="reverseCheck()"/> </body> </body></html>

在javascript中想调用html代码：只能通过属性innerHTML
在javascript中想调用CSS代码：只能通过属性clasName可以调用样式表

.style.属性

<title>移动下拉框选项(单项)</title> </head><script type="text/javascript"><!--function removeLeft(){//拿到左边下拉框的对象var leftSel = document.getElementById("left") ;//拿到右边的下拉框对象var rightSel = document.getElementById("right") ;//拿到左边下拉框选中的optionvar op = leftSel.options[leftSel.selectedIndex] ; //leftSel.selectedIndex:选中项的索引//将选中选项添加到右边下拉框中rightSel.appendChild(op) ;}function removeLeftAll(){//拿到左边下拉框的对象var leftSel = document.getElementById("left") ;//拿到右边的下拉框对象var rightSel = document.getElementById("right") ;//循环添加var length = leftSel.options.length ;for(var i =0 ;i < length ;i++){rightSel.appendChild(leftSel.options[0]);}}//--></script> <body><table align="center"><tr><td><select size="10" id="left"> <!--size属性 表示当前显示多少项--><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option><option>选项5</option><option>选项6</option><option>选项7</option><option>选项8</option></select></td><td><input type="button" value="--->" onclick="removeLeft()"/><br/><input type="button" value="===>" onclick="removeLeftAll()"/><br/><input type="button" value="<---" onclick=""/><br/><input type="button" value="<===" onclick=""/><br/></td><td><select size="10" id="right"><option>选项9</option></select></td></tr></table> </body></html>

<title>下拉框选项的移动(多项)</title> </head><script type="text/javascript"><!--function removeLeft(){//拿到左边下拉框的对象的option数组var leftOps = document.getElementById("left").options ;//拿到右边的下拉框对象var rightSel = document.getElementById("right") ;for(var i = 0 ; i < leftOps.length ; i++){if(leftOps[i].selected){//说明选中了rightSel.appendChild(leftOps[i]) ;i--;}}}function removeLeftAll(){//拿到左边下拉框的对象var leftSel = document.getElementById("left") ;//拿到右边的下拉框对象var rightSel = document.getElementById("right") ;//循环添加var length = leftSel.options.length ;for(var i =0 ;i < length ;i++){rightSel.appendChild(leftSel.options[0]);}}//--></script> <body>  <table align="center"><tr><td><select size="10" id="left" multiple> <!--multiple：选择多项--><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option><option>选项5</option><option>选项6</option><option>选项7</option><option>选项8</option></select></td><td><input type="button" value="--->" onclick="removeLeft()"/><br/><input type="button" value="===>" onclick="removeLeftAll()"/><br/><input type="button" value="<---" onclick=""/><br/><input type="button" value="<===" onclick=""/><br/></td><td><select size="10" id="right"><option>选项9</option></select></td></tr></table> </body></html>


                                                     0        0           	
					
					   文档对象模型DOM概述及DOM树
	  	   MDN 文档对象模型 (DOM) - DOM概述
	  	   DOM-文档对象模型
	  	   文档对象模型DOM
	  	   DOM(文档对象模型)
	  	   DOM 文档对象模型
	  	   DOM 文档对象模型
	  	   DOM文档对象模型
	  	   文档对象模型DOM
	  	   文档对象模型 (DOM)
	  	   DOM(文档对象模型)
	  	   DOM-----文档对象模型
	  	   文档对象模型DOM
	  	   DOM文档对象模型
	  	   DOM(文档对象模型)
	  	   DOM文档对象模型
	  	   文档对象模型DOM
	  	   文档对象模型DOM
	     		  
	  	   codeforces contest 189
	  	   java8 stream学习
	  	   universal-image-loader的基本使用
	  	   分享Kali Linux 2016.2第48周镜像文件
	  	   求购IOS微信组件
	  	   文档对象模型DOM概述及DOM树
	  	   NM Restart Design Overview
	  	   spark mllib 关联规则
	  	   微信小程序学习(10)-button控件
	  	   高通FastCV在eclipse上配置
	  	   arraylist和linklist的区别
	  	   161128
	  	   Mysql5.6以上版本Order by出现意料之外的数据原因与解决
	  	   阿里算法实习生笔试——墙之间积水体积