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取值" οnclick="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="添加" οnclick="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="添加选项" οnclick="addOptions()"/>
<input type="button" value="添加一副图片" οnclick="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" οnclick="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" οnclick="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="全选" οnclick="checkAll(true)"/> <input type="button" value="全不选" οnclick="checkAll(false)"/>
<input type="button" value="反选" οnclick="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") ;
//拿到左边下拉框选中的option
var 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="--->" οnclick="removeLeft()"/><br/>
<input type="button" value="===>" οnclick="removeLeftAll()"/><br/>
<input type="button" value="<---" οnclick=""/><br/>
<input type="button" value="<===" οnclick=""/><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="--->" οnclick="removeLeft()"/><br/>
<input type="button" value="===>" οnclick="removeLeftAll()"/><br/>
<input type="button" value="<---" οnclick=""/><br/>
<input type="button" value="<===" οnclick=""/><br/>
</td>
<td>
<select size="10" id="right">
<option>选项9</option>
</select>
</td>
</tr>
</table>
</body>
</html>
1100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
