<!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>
DOM操作节点对象集合
猜你喜欢
转载自www.cnblogs.com/luoxuw/p/11457603.html
今日推荐
周排行