js--打卡--12.11 dom查询常用方法及实例

来源：互联网发布：古埃及神话知乎编辑：程序博客网时间：2024/06/03 23:05

<script>     /*      * 通过document对象调用元素      *       * 1.getElementByID()        *     --通过id属性获取一个元素节点      * 2.getElementsByTagName()      *     --通过标签名来获取一组元素节点对象      * 3.getElementsByName()      *     --通过name属性来获取一组元素节点对象。      */       /*     * 获取元素节点的子节点     *      * 通过具体的元素节点调用     *      * 1.getElementsByTagName()     *     --方法 返回当前节点的指定标签名后代节点     * 2.childNodes     *     --属性，表示当前节点的所有子节点。     *      *   children --属性 获取当前节点的所有子元素。     *      *      * 3.firstChild     *     --表示当前节点的第一个子节点（包括空白文本节点）     * 4.lastChild     *     --表示当前节点的最后一个子节点。     *      */        /*     * 获取父节点和兄弟节点     *       * 通过具体的节点调用     * 1.parentNode      *      --属性 表示当前节点的父节点     * 2.previousSibling     *      --属性 表示当前节点的前一个兄弟节点     * 3.nextSibling     *      --属性 表示当前节点的后一个兄弟节点     *      */           </script>

<!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">//编写一个通用的给按钮绑定点事件function  click(strBtn,fun){var btn = document.getElementById(strBtn);btn.onclick = fun;}window.onload = function(){//查找#bj节点//为btn01绑定点击事件var btn01 = document.getElementById("btn01");btn01.onclick = function(){//获取id为bj的节点元素var bj = document.getElementById("bj");alert(bj);//innerHTML 属性可以回去标签内部的内容。alert(bj.innerHTML);};/* * 查找所有li节点 *  * getElementsByTagName()--通过标签名来获取一组元素节点对象 * 该方法会给我们返回一个类数组对象，将查询到的结构封装到该对象 */var btn02 = document.getElementById("btn02");btn02.onclick = function(){var lis = document.getElementsByTagName("li");alert(lis.length);//遍历for(var i = 0;i <lis.length;i++){alert(lis[i].innerHTML);}}/* * 查找name=gender的所有节点 *  * getElementsByName()通过name属性来获取一组元素节点对象。 * 该方法会给我们返回一个类数组对象，将查询到的结构封装到该对象 *///给btn03绑定一个点击响应事件var btn03 = document.getElementById("btn03");btn03.onclick = function(){//查找name=gender的所有节点var inputs = document.getElementsByName("gender");alert(inputs.length);//遍历for(var i = 0;i <inputs.length;i++){//innerHTML 属性可以回去标签内部的内容。但是对于自结束标签没有意义。//alert(inputs[i].innerHTML);alert(inputs[i].value);}}/* * 查找#city下所有li节点 *  * getElementsByTagName()--方法 返回当前节点的指定标签名后代节点 * 该方法会给我们返回一个类数组对象，将查询到的结构封装到该对象 *///给btn04添加一个单机响应事件var btn04 = document.getElementById("btn04");btn04.onclick = function(){//查找#city下所有li节点var city = document.getElementById("city");var lis = city.getElementsByTagName("li");alert(lis.length);//遍历for(var i =0;i<lis.length;i++){alert(lis[i].innerHTML);}}/* * 返回#city的所有子节点 *  * childNodes 属性，表示当前节点的所有子节点。 * 标签和标签之间的空白也会当做文本节点（所以有9个） *  * children 属性 获取当前节点的所有子元素。(4个) *///给btn05添加一个单机响应事件var btn05 = document.getElementById("btn05");btn05.onclick = function(){//返回#city的所有子节点var city = document.getElementById("city");var childs = city.childNodes;var childs = city.children;alert(childs.length);//遍历for(var i =0;i<childs.length;i++){alert(childs[i]);}}//给btn06添加一个单机响应事件var btn06 = document.getElementById("btn06");btn06.onclick = function(){//返回#phone的第一个子节点var phone = document.getElementById("phone");//firstChild表示当前节点的第一个子节点（包括空白文本节点）var first = phone.firstChild;alert(first);//lastChild表示当前节点的第一个子节点（包括空白文本节点）var last = phone.lastChild;alert(last);}//返回#bj的父节点click("btn07",function(){    //获取id为bj的节点    var bj = document.getElementById("bj");    //parentNode ----属性 表示当前节点的父节点    var bp = bj.parentNode;    alert(bp.innerHTML);        /*     * innerText();     *   --该属性可以获取到元素内部的文本内容     *   --和innerHTML（）区别，自动去除HTML标签。     *      */    alert(bp.innerText);})/* * previousSibling; *             --属性 表示当前节点的前一个兄弟节点(可能返回空白的文本节点) * previousElementSibling; *             --属性，返回当前节点的前一个兄弟元素 */click("btn08",function(){//获取id为android的节点var and = document.getElementById("android");//返回#android的前一个兄弟节点var pre = and.previousSibling;alert(pre.innerHTML);var pre = and.nextSibling;alert(pre.innerHTML);var pre = and.previousElementSibling;alert(pre.innerHTML);})//读取#username的value属性值click("btn09",function(){})//设置#username的value属性值click("btn10",function(){})//返回#bj的文本值click("btn11",function(){})};</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 type="radio" name="gender" value="male"/>Male<input 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>

阅读全文

0 0