<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
/*
* 定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数：
* idStr 要绑定单击响应函数的对象的id属性值
* fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr , fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
1、查找#bj节点
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01"); //获取按钮
btn01.onclick = function(){ //为按钮增加onclick事件，onclick事件作用于bj标签
//查找#bj节点
var bj = document.getElementById("bj");//获取id为bj节点对象，可以对其进行操作
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
2、查找所有li节点
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组中返回
var lis = document.getElementsByTagName("li"); //li collection
//打印lis
//alert(lis.length);
//变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML); //打印标签文本内容
}
};
3.查找name=gender的所有节点
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03"); //nodelist
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert(inputs.length); // 2
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML文本
* 对于自结束标签input，这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].value);
alert(inputs[i].type);
alert(inputs[i].id);
//alert(inputs[i].class); class是保留关键字
alert(inputs[i].className);
}
};
4、查找#city下所有li节点
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//获取id为city的元素
var city = document.getElementById("city");
//查找#city下所有li节点
// var lis = document.getElementsByTagName("li"); 查找文档页面中所有的li
var lis = city.getElementsByTagName("li");
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
5、返回#city的所有子节点
//为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
//获取id为city的节点
var city = document.getElementById("city");
//返回#city的所有子节点
/*
* childNodes属性会获取包括文本节点在内的所有节点
* 根据DOM标签标签间空白也会当成文本节点
* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
* 所以该属性在IE8中会返回4个子元素而其他浏览器是9个（4个+ 5个li元素之间空白）
*/
var cns = city.childNodes;
//alert(cns.length);
/*for(var i=0 ; i<cns.length ; i++){
alert(cns[i]);
}*/
/*
* children属性可以获取当前元素的所有子元素li，不包含文本节点
*/
var cns2 = city.children; //推荐使用
alert(cns2.length);
};
6、返回#phone的第一个子节点
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
//获取id为phone的元素
var phone = document.getElementById("phone");
//返回#phone的第一个子节点
//phone.childNodes[0];
//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
var fir = phone.firstChild;
//firstElementChild获取当前元素的第一个子元素（不会获取空白文本）
/*
* firstElementChild不支持IE8及以下的浏览器，
* 如果需要兼容他们尽量不要使用
*/
//fir = phone.firstElementChild;
alert(fir);
};
7、返回#bj的父节点
//为id为btn07的按钮绑定一个单击响应函数
//myClick函数在文档开始的位置，为了减少重复代码，
myClick("btn07",function(){ //获取btn07按钮对象，为其绑定匿名函数onclick对哪个节点做出响应
//获取id为bj的节点
var bj = document.getElementById("bj");
//返回#bj的父节点
var pn = bj.parentNode;
alert(pn.innerHTML); //<li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li>
/*
* innerText
* - 该属性可以获取到元素内部的文本内容
* - 它和innerHTML类似，不同的是它会自动将html标签去除
*/
//alert(pn.innerText); //北京 上海 东京 首尔
});
8、返回#android的前一个兄弟节点
//为id为btn08的按钮绑定一个单击响应函数
myClick("btn08",function(){
//获取id为android的元素
var and = document.getElementById("android");
//返回#android的前一个兄弟节点（也可能获取到空白的文本）
var ps = and.previousSibling;
//previousElementSibling获取前一个兄弟元素（不包含空白文本），IE8及以下不支持
//var pe = and.previousElementSibling;
alert(ps);
});
9、读取#username的value属性值
//读取#username的value属性值
myClick("btn09",function(){
//获取id为username的元素
var um = document.getElementById("username");
//读取um的value属性值
//文本框的value属性值，就是文本框中填写的内容
alert(um.value);
});
10、设置#username的value属性值
//设置#username的value属性值
myClick("btn10",function(){
//获取id为username的元素
var um = document.getElementById("username");
um.value = "今天天气真不错~~~";
});
11、返回#bj的文本值
//返回#bj的文本值
myClick("btn11",function(){
//获取id为bj的元素
var bj = document.getElementById("bj");
//方法1
//alert(bj.innerHTML);
//alert(bj.innerText);
//方法2
//获取bj中的文本节点
/*var fc = bj.firstChild; //文本对象
alert(fc.nodeValue);*/文本内容
alert(bj.firstChild.nodeValue);
// // 文本节点一般是作为元素节点的子节点存在的。
// • 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本
// 节点。
// • 例如：
// – 元素节点.firstChild;
// – 获取元素节点的第一个子节点，一般为文本节点
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
12, 三个常用的对象
//获取body标签
//var body = document.getElementsByTagName("body")[0];
//document.getElementsByTagName("body") 是一个类数组
/*
* 在document中有一个属性body，它保存的是body的引用
*/
var body = document.body;
/*
* document.documentElement保存的是html根标签
*/
var html = document.documentElement;
//console.log(html);
/*
* document.all代表页面中所有的元素
all是undefined,可能是浏览器的bug
*/
var all = document.all;
//console.log(all.length);
/*for(var i=0 ; i<all.length ; i++){
console.log(all[i]);
}*/
//all = document.getElementsByTagName("*"); //代表页面中所有的元素
//console.log(all.length);
13,CSS选择器查询方法
/*
* 根据元素的class属性值查询一组元素节点对象
* getElementsByClassName()可以根据class属性值获取一组元素节点对象，
* 但是该方法不支持IE8及以下的浏览器
*/
//var box1 = document.getElementsByClassName("box1");
//console.log(box1.length);
//获取页面中的所有的div
//var divs = document.getElementsByTagName("div");
//获取class为box1中的所有的div
//.box1 div
/*
* document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")
//console.log(div.innerHTML);
//console.log(box1.innerHTML);
/*
* document.querySelectorAll()
* - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，它也会返回数组
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.log(box1);
};
</script>
</head>
<body>
<div id="box2"></div>
<div class="box1">
我是第一个box1
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div></div>
</body>
</html>
DOM操作节点对象集合
Wesley13
• 阅读
632
点赞
收藏
