JavaScript---DOM模型之DOM树节点的增、删、改、查（一）
2017-05-10 11:06
316 查看
玩转DOM模型
我们想学好DOM模型，无非就是就是对DOM树的增、删、改、查。所以就来好好学学吧，嘻嘻！ 一起进步。
第一种：直接查，4种常用方法
通过getElementById()—通过标签的id属性—（精确查找）拿到单个节点
通过getElementsByName()—通过标签的name属性—（条件匹配）拿到集合
通过getElementsByTagName()—通过标签名称 —（条件匹配）拿到集合
通过getElementsByClassName()—通过标签的class属性—（条件匹配）拿到集合
通过getElementById()—通过标签的id属性
（ 通过拿到节点，然后在网页中节点的位置输入文本信息）
通过getElementsByName()—通过标签的name属性
（ 通过拿到节点，然后在网页中节点的位置将编辑框内的value修改）
通过getElementsByTagName()—通过标签名称
（ 通过拿到节点，然后在网页中节点的位置将编辑框内的value修改）
第四中ByClassName就不演示了，都和前面两种类似。
总结一下，这种直接查询。因为document是拿到整个网页的DOM树，所以所有的节点都可以拿到，还有一种在部分树中查询节点，即查询的范围不是整个DOM树，可以是部分树。下面演示一下
例：网页中常常有如图下这样的情况：商品展示超链接需要设置新开窗口打开，还有友情连接超链接要设置为直接当前窗口打开，都是a标签下，怎么设置呢？ 代码怎么写呢？
代码如下
解决思路： 我们只要对div中的 a 标签 的 target 属性 设置为 “_blank” ，前面的默认，就可以完成后面连接新窗口开，前面连接默认当前窗口打开
（当然了，商品页面，记得写啊！随便写个网页就好了，这不是重要的点）
代码实现：
演示的话，我再想想要怎么看到这个过程。
（没调用函数前，当前窗口开，上面是3个窗口）
（调用函数后，新窗口开，上面是4个窗口）
下面是关于直接查询的代码
第二种：间接查（查表格元素时，有点坑，不同浏览器也有点不同）
通过节点在dom中的相互之间的辈份关系(父子、兄弟)进行查询。
属性:
firstChild、lastChild、nextSibling(下一个兄弟节点)、parentNode、previousSibling(上一个兄弟节点)
集合: childNodes(儿子们,包括元素和文本内容)、children(儿子们，仅包括元素,没有文本) —属性是不在儿子们当中的
先演示集合 childNodes(儿子们,包括元素和文本内容)、children(儿子们，仅包括元素,没有文本)
查询UL中的自集合 childNodes
查询UL中的自集合 children
下面是关于间接查询的学习代码
我们想学好DOM模型，无非就是就是对DOM树的增、删、改、查。所以就来好好学学吧，嘻嘻！ 一起进步。
DOM树节点的查
查，有两种方式第一种：直接查，4种常用方法
通过getElementById()—通过标签的id属性—（精确查找）拿到单个节点
通过getElementsByName()—通过标签的name属性—（条件匹配）拿到集合
通过getElementsByTagName()—通过标签名称 —（条件匹配）拿到集合
通过getElementsByClassName()—通过标签的class属性—（条件匹配）拿到集合
通过getElementById()—通过标签的id属性
（ 通过拿到节点，然后在网页中节点的位置输入文本信息）
<body>
查询节点类别1(level0):<br/>
1)通过getElementById()---通过标签的id属性<br/>
2)通过getElementsByName()---通过标签的name属性<br/>
3)通过getElementsByTagName()---通过标签名称 <br/>
4)通过getElementsByClassName()---通过标签的class属性<br/>
<hr>
<input type="button" value="ById查询演示" onclick="demo1()">
<div id="div1">getElementById()方法演示</div>
<script type="text/javascript">
function demo1(){
var oDiv1 = document.getElementById("div1");
oDiv1.innerText = "成功拿到了这个节点！";
}
</script>
</body>通过getElementsByName()—通过标签的name属性
（ 通过拿到节点，然后在网页中节点的位置将编辑框内的value修改）
<body>
查询节点类别1(level0):<br/>
1)通过getElementById()---通过标签的id属性<br/>
2)通过getElementsByName()---通过标签的name属性<br/>
3)通过getElementsByTagName()---通过标签名称 <br/>
4)通过getElementsByClassName()---通过标签的class属性<br/>
<hr>
<input type="button" value="ByName查询演示" onclick="demo1()">
<input type="text" value="请输入姓名" name="UserName" >
<script type="text/javascript">
function demo1(){
var ByName = document.getElementsByName("UserName");
//这种方法拿到的是 所有name属性=“UserName”的节点集合
//我们这里只有一个所以是第零个
ByName[0].value = "用getElementsByName方法拿到节点，修改了value值";
}
</script>
</body>通过getElementsByTagName()—通过标签名称
（ 通过拿到节点，然后在网页中节点的位置将编辑框内的value修改）
<body>
查询节点类别1(level0):<br/>
1)通过getElementById()---通过标签的id属性<br/>
2)通过getElementsByName()---通过标签的name属性<br/>
3)通过getElementsByTagName()---通过标签名称 <br/>
4)通过getElementsByClassName()---通过标签的class属性<br/>
<hr>
<input type="button" value="ByTagName查询演示" onclick="demo1()">
<input type="text" name="pwd" >
<script type="text/javascript">
function demo1(){
var ByTgName = document.getElementsByTagName("input");
//这种方法拿到的是 所有标签为"input"的节点集合
//我们这里有2个所以是第1个
ByTgName[1].value = "用getElementsByTgName方法拿到节点";
}
</script>
</body>第四中ByClassName就不演示了，都和前面两种类似。
总结一下，这种直接查询。因为document是拿到整个网页的DOM树，所以所有的节点都可以拿到，还有一种在部分树中查询节点，即查询的范围不是整个DOM树，可以是部分树。下面演示一下
例：网页中常常有如图下这样的情况：商品展示超链接需要设置新开窗口打开，还有友情连接超链接要设置为直接当前窗口打开，都是a标签下，怎么设置呢？ 代码怎么写呢？
代码如下
友情链接:<br/> <a href="http://www.hncu.net">城院首页</a> <a href="http://www.sina.com">新浪首页</a> <br/> 商品展示:<br/> <div id="goods"> <a href="goods/1.html">商品1</a> <a href="goods/2.html">商品2</a> <a href="goods/3.html">商品3</a> </div>
解决思路： 我们只要对div中的 a 标签 的 target 属性 设置为 “_blank” ，前面的默认，就可以完成后面连接新窗口开，前面连接默认当前窗口打开
（当然了，商品页面，记得写啊！随便写个网页就好了，这不是重要的点）
代码实现：
<body>
友情链接:<br/> <a href="http://www.hncu.net">城院首页</a> <a href="http://www.sina.com">新浪首页</a> <br/> 商品展示:<br/> <div id="goods"> <a href="goods/1.html">商品1</a> <a href="goods/2.html">商品2</a> <a href="goods/3.html">商品3</a> </div>
<hr>
<input type="button" value="设置超链接" onclick="demo1()">
<script type="text/javascript">
function demo1(){
//第一步，先拿到 需要设置新窗口打开的标签的父亲节点---div， 就相当于拿到部分树了
var div = document.getElementById("goods");
//第二部：再在div 树下面查询所有的a 节点
var aNode = div.getElementsByTagName("a");
//第三部： 设置aNode节点下面的target属性
for(var i=0;i<aNode.length;i++){
aNode[i].target="_blank";
}
}
</script>
</body>
演示的话，我再想想要怎么看到这个过程。
（没调用函数前，当前窗口开，上面是3个窗口）
（调用函数后，新窗口开，上面是4个窗口）
下面是关于直接查询的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM模型演示---增删改查中的查询</title>
</head>
<body>
查询节点类别1(level0):
1)通过getElementById()---通过标签的id属性
2)通过getElementsByName()---通过标签的name属性
3)通过getElementsByTagName()---通过标签名称
4)通过getElementsByClassName()---通过标签的class属性
<hr/>
<input type="button" value="演示节点的查询1" onclick=" demo1();"> <br />
<div id="div1">湖南城市学院</div>
<script type="text/javascript">
//1)通过getElementById()---通过标签的id属性
function demo1(){
var oDiv = document.getElementById("div1");
oDiv.innerText="城院很好!";//写
}
</script>
<input type="button" value="演示节点的查询2" onclick=" demo2();"> <br />
<input type="text" name="userName" value="请输入姓名">
<script type="text/javascript">
//2)通过getElementsByName()---通过标签的name属性---注意，返回的是一个数组
function demo2(){
var oInputNames = document.getElementsByName("userName");
//读
//alert(oInputNames[0].nodeName);
//alert(oInputNames[0].value);
//写
//oInputNames[0].value="abc123";
document.getElementsByName("userName")[0].value="OKOK";
}
</script>
<br/>
<input type="button" value="演示节点的查询3" onclick=" demo3();"> <br />
<input type="text" name="pwd" >
<script type="text/javascript">
//3)通过getElementsByTagName()---通过标签名---注意，返回的是一个数组
function demo3(){
document.getElementsByTagName("input")[4].value="asd12345";
}
</script>
<br/>
<input type="button" value="演示节点的查询4" onclick=" demo4();"> <br />
<input type="text" name="code" class="aa">
<script type="text/javascript">
//4)通过getElementsByClassName()---通过标签的class属性---注意，返回的是一个数组
function demo4(){
document.getElementsByClassName("aa")[0].value="112233aa";
}
</script>
<hr/>
通过普通元素(标签节点)，在它的子孙节点中进行level0查询即用
getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()等方法。<br/><br/>
友情链接:<br/> <a href="http://www.hncu.net">城院首页</a> <a href="http://www.sina.com">新浪首页</a> <br/> 商品展示:<br/> <div id="goods"> <a href="goods/1.html">商品1</a> <a href="goods/2.html">商品2</a> <a href="goods/3.html">商品3</a> </div>
<br/>
<input type="button" value="演示节点的查询并设置用新窗口打开商品展示" onclick=" demo5();"> <br />
<script type="text/javascript">
function demo5(){
var oDivGoods = document.getElementById("goods");
var oAs = oDivGoods.getElementsByTagName("a");//在oDivGoods节点的子孙节点中进行level0的查询
for( var i=0;i<oAs.length;i++ ){
oAs[i].target="_blank";
}
}
</script>
</body>
</html>
第二种：间接查（查表格元素时，有点坑，不同浏览器也有点不同）
通过节点在dom中的相互之间的辈份关系(父子、兄弟)进行查询。
属性:
firstChild、lastChild、nextSibling(下一个兄弟节点)、parentNode、previousSibling(上一个兄弟节点)
集合: childNodes(儿子们,包括元素和文本内容)、children(儿子们，仅包括元素,没有文本) —属性是不在儿子们当中的
先演示集合 childNodes(儿子们,包括元素和文本内容)、children(儿子们，仅包括元素,没有文本)
<input type="button" value="间接查询childNodes" onclick="demo1()">
<input type="button" value="间接查询children" onclick="demo2()">
<script type="text/javascript">
function demo1(){
var odiv = document.getElementsByTagName("ul");
// childNodes(儿子们,包括元素和文本内容) ---属性是不在儿子们当中的
var oUI = odiv[0].childNodes;
var str = "";
for(var i=0;i<oUI.length;i++){
str+=oUI[i].nodeName+" ";
}
alert(str);
}
function demo2(){
var odiv = document.getElementsByTagName("ul");
//children(儿子们，仅包括元素,没有文本) ---属性是不在儿子们当中的
var oUI = odiv[0].children;
var str = "";
for(var i=0;i<oUI.length;i++){
str+=oUI[i].nodeName+" ";
}
alert(str);
}
</script>查询UL中的自集合 childNodes
查询UL中的自集合 children
下面是关于间接查询的学习代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM模型演示---增删改查中的查询2</title>
</head>
<body>
查询节点类别2(level1):
通过节点在dom中的相互之间的辈份关系(父子、兄弟)进行查询。
属性: firstChild、lastChild、nextSibling(下一个兄弟节点)、parentNode、previousSibling(上一个兄弟节点) <br/>
集合: childNodes(儿子们,包括元素和文本内容)、children(儿子们，仅包括元素,没有文本) ---属性是不在儿子们当中的
<hr/>
<input type="button" value="演示节点的查询1" onclick=" demo1();"> <br />
<input type="button" value="演示节点的查询2" onclick=" demo2();"> <br />
<input type="button" value="演示节点的查询3" onclick=" demo3();"> <br />
<div id="div1">湖南城市学院</div>
<table id="tab1">
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr id="abc">
<td>单元格2-1</td>
<td>单元格2-2</td>
</tr>
</table>
<script type="text/javascript">
function demo1(){
var oTable = document.getElementById("tab1");
var oNode = oTable.firstChild;
//alert(oNode.nodeType+","+oNode.nodeName);//3,#text ----注意，高版本IE和火狐中，换行符是被看成是上级节点的一个“文本内容”型的孩子节点
//alert(oTable.childNodes[1].nodeType+","+oTable.childNodes[1].nodeName);//1,TBODY ----注意，表格中隐藏着一个<TBODY>标签，在该标签内部才是若干<tr>
var oTbody = oTable.firstChild;
while(oTbody.nodeType!=1){ //把换行符跳过
oTbody = oTbody.nextSibling;
}
//alert(oTbody.childNodes[0].nodeType+","+oTbody.childNodes[0].nodeName);//注意, <TBODY>的第0个孩子是第一个<TR>
//显示<tbody>中的所有孩子
var oNodes=oTbody.childNodes;
for(var i=0; i<oNodes.length;i++){
alert(oNodes[i].nodeName+","+oNodes[i].nodeValue);
}
}
//获取表格中第一个<td>中的文本内容
function demo2(){
var oTable = document.getElementById("tab1");
var oTdNode = oTable;
oTdNode=nextNode(oTdNode);
while(oTdNode.nodeName!="TD"){ //注意,这里不能用"<TD>"来判断
oTdNode=oTdNode.childNodes[0];
oTdNode=nextNode(oTdNode);
}
alert(oTdNode.innerText);
}
//跳过空白符
function nextNode(oNode){
while(oNode.nodeName=="#text"){
oNode= oNode.nextSibling;
}
return oNode;
}
function demo3(){
var oTable = document.getElementById("tab1");
var oNode = oTable.parentNode.parentNode;
//alert(oNode.nodeName); //HTML
var oTbody=oTable.childNodes[1];
var oNodes = oTbody.children;
for(var i=0;i<oNodes.length;i++){
alert(oNodes[i].nodeName+","+oNodes[i].value);
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript---DOM模型之DOM树节点的增、删、改、查（二）
- JavaScript语言基础---(十四)DOM模型演示---通过document获取页面节点
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- JavaScript---BOM模型之window对象，DOM模型的节点获取
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- javascript dom 节点对象的原生事件和自定义事件
- javascript中0级DOM和2级DOM事件模型浅析
- javascript中的dom模型
- javascript操作dom 建立 增加 删除 克隆 访问节点
- javascript中DOM节点
- javascript获取Dom节点元素
- javascript中0级DOM和2级DOM事件模型浅析
- javascript--DOM对象模型的常用操作属性和方法
- JavaScript 和文档对象模型（DOM）
- 第5课 - DOM模型 - [精通JavaScript+jQuery]
- 关于javascript DOM事件模型的两件事
- Javascript入门学习第八篇 js dom节点属性说明第1/2页
- javascript操作dom 建立 增加 删除 克隆 访问节点