您的位置：首页 > 其它

web 学习笔记5-DOM以及节点的操作

2017-05-08 22:17 513 查看
1、Dom概述：

DOM：docuemnt object model 文档对象模型
作用：重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目
Core DOM :   定义了一套标准的针对任何结构化文档的对象
XML  DOM :   定义了一套标准的针对 XML 文档的对象
HTML DOM :   定义了一套标准的针对 HTML 文档的对象。
xml：expensible markup language : 可扩展标记语言。
例如一个简单的xml
<penson>
<name>张三</name>
<age>23</age>
</person>


2、结点的属性：

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

b. nodeValue（节点值）
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
注意：nodeValue 属性对于文档节点和元素节点是不可用的。

c. nodeType（节点类型）  : nodeType 属性可返回节点的类型。
标签节点的类型值是 1
属性节点的类型值是 2
文本节点的类型值是 3

简单的例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>DOM节点的属性</title>
</head>
<body>
<p id = "p">hello</p>
<script type="text/javascript">
<!--
var p = document.getElementById("p") ;
alert(p.nodeName + " :" + p.nodeValue + ":" + p.nodeType) ;
//-->
</script>
</body>
</html>
运行的结果是：P:null:1 (因为p是一个元素节点，所以没有nodeValue)


3、结点的分类：

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


4、结点的关系：

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

简单的例子：节点之间的导航
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<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>20</td>
</tr>
</table>
<script type="text/javascript">

//示例： 拿到王五的年龄

//拿到根节点
var root = document.documentElement ;
//alert(root.nodeName) ;
//拿到body节点
var body = root.lastChild ;
//alert(body.nodeName) ;
//拿到table节点
var table = body.firstChild ;
//拿到tbody节点
var tbody = table.firstChild ;
//拿到成龙的年龄
var age = tbody.firstChild.nextSibling.lastChild.firstChild.nodeValue ;
alert(age);
</script>
</body>
</html>


5、属性节点的操作：

<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>
运行的结果：type:text name:name id:txt


6、拿取标签节点的方法：3种

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

<body>
<p name = "p">hello</p>
<input type="text" name="username"><br>
<input type="text" name="username"><br>
<input type="text" name="username"><br>

<script type="text/javascript">
<!--
//第一种方法：给节点设置id，采用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) ;//1
alert(ps[0].firstChild.nodeValue) ;//弹出hello提示，firstChild就是拿到了hello这个文本节点
//-->
</script>
</body>


7、拿到文本节点内容的两种方法：

document.getElementById("h1")
document.getElementsByTagName("h1")
简单的示例；
<body>
<h1 id = "h1">文本内容</h1>
<script type="text/javascript">
<!--
//示例： 拿到文本内容的文本
//第一种方法，亲测可以正常弹出
var h1 = document.getElementById("h1") ;
alert(h1.firstChild.nodeValue);

//第二种方式
var h1 = document.getElementsByTagName("h1") ;
alert(h1[0].innerHTML) ;
lert(h1[0].innerText) ;
//-->
</script>
</body>


8、标签节点的属性：（已有的知识）

主要是学习逻辑判断节点的类型，childNodes 的使用

<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>


9、获取下拉框文本的值：（已有的知识）

<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") ;//获取所有的option标签节点
for(var  i =0 ; i<ops.length ;i++){
//alert(ops[i].text) ;//也可以正常弹出来
alert(ops[i].innerHTML) ;
}
//-->
</script>
</body>


以下是节点的增删改查，非常重要

10、替换节点：

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

简单的示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<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) ;
bjNode.parentNode.replaceChild(node,bjNode) ;//注意使用克隆的节点，如果直接使用gameNode的节点，则gameNode的节点就会消失

}
//-->
</script>
<body>
<ul >
<li id="bj" onclick="changeNode()">北京</li>
<li>山东</li>
</ul>
<ul>
<li  id="game">打<p>麻将</p></li>
<li>斗地主</li>
</ul>

</body>
</html>


11、添加节点：

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

添加结点：
appendChild() : 添加子节点

示例：添加下拉框选项
<script type="text/javascript">
<!--
function addOptions(){
//创建一个新的节点
//第一种方式
var option = document.createElement("option") ;
option.value = "小学" ;//单独写这个，在浏览器中添加会出现空的，显示不了
option.text = "小学" ;//单独写这个，测试正常。所以俩个一起写
//拿到下拉框，加入小学
document.getElementsByTagName("select")[0].options.add(option) ;

//第二种方式，直接添加一个html代码
//获得select对象
var select = document.getElementsByTagName("select")[0] ;
select.innerHTML = select.innerHTML + "<option value = '小学'>小学</option>" ;

//第三种，使用appendChild
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" ;
img.height = "300" ;

//将图片添加到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>


12、删除结点：

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

例如：
function delTr(btn){
var btnTd = document.createElement("td") ;
btnTd.innerHTML = "<button onclick = 'delTr(this)'>删除</button>" ;//这个this代表是这个按钮标签自己，

//删掉表格的行
//采用removeChild()
//父亲(tbody)干掉儿子(tr)
//拿到曾爷爷
var tbody = btn.parentNode.parentNode.parentNode ;
//拿到爷爷
var tr =  btn.parentNode.parentNode ;
//曾爷爷干掉爷爷
tbody.removeChild(tr);
}

一个全选和全不选的示例：
<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>


简单的总结：

在javascript中想调用html代码： 只能通过属性innerHTML

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

.style.属性
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航