@CHARSET "UTF-8";body { width: 800px; margin-left: auto; margin-right: auto;}button { width: 300px; margin-bottom: 10px;}#btnList { float:left;}#total{ width: 450px; float:left;}ul{ list-style-type: none; margin: 0px; padding: 0px;}.inner li{ border-style: solid; border-width: 1px; padding: 5px; margin: 5px; background-color: #99ff99; float:left;}.inner{ width:400px; border-style: solid; border-width: 1px; margin-bottom: 10px; padding: 10px; float: left;}<!DOCTYPE> <html><head><title></title&四年级上册语文第一单元作文gt;<meta content="text/html; chart=UTF-8" http-equiv="Content-Type"><link href="style/css.css" rel="stylesheet" type="text/css"/><script type="text/javascript"> /** * 在写第七个重复性的代码时，卧槽是真的累，难道像我这样底层程序员只能写重复代码？ * 抽象抽象，这样才有类才能去找对象。 * 既然是重复性的代码，我们何不抽取出来成为另外一个函数来简化操作呢 */ function simplify(idstr, fun) { //绑定单击响应函数对象的id属性 传入这个需要绑定的参数 var btn = document.getElementById(idstr); //绑定每个按钮的触发函数，这个是不同的不能写死，那就传入一个函数吧 //回调函数这就是了，我先占个位置，放个函数在这，用的时候去修改这个函数 btn.onclick = fun; } window.onload = function () { //为id为btn01的按钮绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); function fun() { //查找#bj节点,得到的是一个对象 var bj = document.getElementById("bj"); //打印bj alert(bj.innerHTML); } btn01.onclick = fun; //为id为btn02的按钮绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function () { //查找所有的li节点 /** * getElementsByTagName（）方法可以根据标签名获取一组元素节点对象 * 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，不是数组。 * 即使是一个也会封装在数组中返回。 */ var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { //依次打印出所有li标签里的内容 alert(lis[i].innerHTML); } }; //为id为btn03的按钮绑定一个单击响应函数 var btn03 = document.getElementById("btn03"); btn03.onclick = function () { /** *查找name=gender的所有节点 * getElementsByName（）方法可以根据Name属性获取一组元素节点对象 * 返回的也是类数组 NodeList */ var gen = document.getElementsByName("gender"); for (var i = 0; i < gen.length; i++) { /** * innerHTML用于获取元素内部HTML代码（两个标签之间夹的文字） * 如果需要读取元素节点属性值 */ alert(gen[i].value); } }; //为id为btn04的按钮绑定一个单击响应函数 var btn04 = document.getElementById("btn04"); btn04.onclick = function () { // 获取id为city的元素 var city = document.getElementById("city"); /*梦幻西游凌霄飞剑* * 获取#city下所有li节点，不能直接使用document.getElementsByTagName * 那样获取的是全局的li标签， * 先获取某元素节点，在在该节点下的后代节点中寻找li标签 */ var lis = city.getElementsByTagName("li"); for (var i = 0; i < 长恨歌主题lis.length; i++) { alert(lis[i].innerHTML); } }; //为id为btn05的按钮绑定一个单击响应函数 var btn05 = document.getElementById("btn05"); btn05.onclick = function () { //获取id为city的节点 var city = document.getElementById("city"); /** *childNodes–属性，表示当前节点的所有子节点,包括文本节点在内的所有节点 * DOM标签之间的空格也会当成一个文本节点 * 下边ul和li之间，li和li之间的五个间隔也会当成文本节点保存在集合中 * 返回的是集合，包括每一个节点元素的类数组 * <ul id="city"> * <li id="bj">北京</li> * <li>上海</li> * <li>东京</li> * <li>首尔</li> * </ul> * 注意：在ie8及以下不会将空白当做子节点 */ //返回#city的所有子节点 var cns = city.children; alert(cns.length); for (var i = 0; i < cns.length; i++) { console.log(cns[i]); } }; //为id为btn06的按钮绑定一个单击响应函数 var btn06 = document.getElementById("btn06"); btn06.onclick = function () { var phone = document.getElementById("phone"); /** * 下边html标签如果不想连着写就用childNodes属性获取所有节点 * 使用数组下标形式调用 * 或者直接使用chidren属性，采用下标形式调用。 */ //返回#phone的第一个子节点 var firchd2 = phone.firstElementChild; alert(firchd2.innerHTML); // var firChd = phone.children; // alert(firChd[0].innerHTML); }; //返回#bj的父节点 simplify("btn07", function () { var bj = document.getElementById("bj"); //返回#bj的父节点 var bjp = bj.parentNode; //alert(bjp.innerHTML); /*** * innerText * -该属性可以获得元素内部的文本属性 * -他和innerHTML区别，会自动将html标签去掉。 */ alert(bjp.innerText); }); //返回#android的前一个兄弟节点 simplify("btn08", function () { var u = document.getElementById("android"); //var pvsb = u.previousSibling; va2021年大学录取分数线r pvsb2 = u.previousElementSibling alert(pvsb2.innerHTML); }); //读取#urname的value属性值 simplify("btn09",function () { var u = document.getElementById("urname"); var uvue = u.value; //文本框的value值就是文本框中填写的内容 alert(uvue); }); //设置#urname的value属性值 simplify("btn10",function () { var u = document.getElementById("urname"); u.value = "人和人的沟通，有时也没没有用"; var uvue = u.value; //文本框的value值就是文本框中填写的内容 alert(uvue); }); //返回#bj的文本值 simplify("btn11",function () { var bj = document.getElementById("bj"); //alert(bj.innerHTML); //alert(bj.innerText); //北京文本节点是id为bj元素的子节点，可以使用lastChild来获取 var last = bj.lastChild; /** * 注意文本节点内容不能在使用innerHTML， * 文本节点的nodeValue就是文本内容 * 属性节点的nodeValue就是属性值 * 可以直接写为bj.lastChid.nodeValue * */ alert(last.nodeValue); }); }; </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" name="gender" type="radio" value="male"/>Male<input class="hello" name="gender" type="radio" value="female"/>Female<br><br>name:<input id="urname" name="name" type="text" 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">返回#urname的value属性值</button></div><div><button id="btn10">设置#urname的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body></html>fun是一个定义函数，函数是function引用类型的实例，就是一个对象，是对象就会被保存在内存中，引用类型会被保存在堆内存，（直接赋值字面量会被保存在栈内存），函数名就是指向这个对象的指针。
function fun() { return 0;}var a= fun袁璐;var b= fun();var c= (function (){ return 0;})();var d= function (){ return 0;};a变量得到的是将fun指针的拷贝，用于传参，不会执行函数，让a知道了fun函数位置，需要的时候再用，和d得到的差不多，就是回调函数。
b变量得到的是函数执行结果，只要函数名后加了括号，就会调用该函数。c和b的到的一样，c是匿名自调用函数，一旦定义立即执行，只执行一次。
本文地址：https://blog.csdn.net/LIUCHUANQI12345/article/details/109262850
本文发布于:2023-04-03 20:41:20，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/32a818044c45120e75eefa0adbc43dd2.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：DOM查询例子.doc
本文 PDF 下载地址：DOM查询例子.pdf
| 留言与评论（共有 0 条评论） |
