JavaScript-dom查找返回值练习

文章目录

• dom 查找返回练习
• • 1. 任务
  • • 1.1 查找 #bj 节点
    • 1.2 查找所有 li 节点
    • 1.3 查找 name=gender 的所有节点
    • 1.4 查找 #city 下所有 li 节点
    • 1.5 返回 #city 的所有子节点
    • 1.6 返回 #phone 的第一个子节点
    • 1.7 返回 #bj 的父节点
    • 1.8 返回 #android 的前一个兄弟节点
    • 1.9 返回 #username 的 value 属性值
    • 1.10 设置 #username 的 value 属性值
    • 1.11 返回 #bj 的文本值
  • 2. 思路
  • • 2.1 查找 #bj 节点
    • 2.2 查找所有 li 节点
    • 2.3 查找 name=gender 的所有节点
    • 2.4 查找 #city 下所有 li 节点
    • 2.5 返回 #city 的所有子节点
    • 2.6 返回 #phone 的第一个子节点
    • 2.7 返回 #bj 的父节点
    • 2.8 返回 #android 的前一个兄弟节点
    • 2.9 返回 #username 的 value 属性值
    • 2.10 设置 #username 的 value 属性值
    • 2.11 返回 #bj 的文本值
  • 3. 完整代码实现

dom 查找返回练习

1. 任务

1.1 查找 #bj 节点

1.2 查找所有 li 节点

1.3 查找 name=gender 的所有节点

1.4 查找 #city 下所有 li 节点

1.5 返回 #city 的所有子节点

1.6 返回 #phone 的第一个子节点

1.7 返回 #bj 的父节点

1.8 返回 #android 的前一个兄弟节点

1.9 返回 #username 的 value 属性值

1.10 设置 #username 的 value 属性值

1.11 返回 #bj 的文本值

dom 查找返回值练习

2. 思路

定义一个函数，专门用来为元素绑定单机响应函数

• 参数:
• idStr 要绑定单机响应函数的对象的 id 的属性值
• fun 事件的回调函数，当单击函数时，该函数将会被触发

function myClick(idStr, fun) {//为id为btn01的按钮绑定一个单机响应函数var btn = document.getElementById(idStr);btn.onclick = fun;
}

2.1 查找 #bj 节点

1. 为 id 为 btn01 的按钮绑定一个单机响应函数
2. 查找#bj 节点
3. 打印 bj
4. innerHTML
   • 通过这个属性可以获取到元素内部的 html 代码

//为id为btn01的按钮绑定一个单机响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {//查找#bj节点var bj = document.getElementById("bj");//打印bj//innerHTML  通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);
};

2.2 查找所有 li 节点

1. 为 id 为 btn02 的按钮绑定一个单机响应函数
2. 查找所有 li 节点
3. getElementsByTagName()可以根据标签名来获取一组元素节点对象
   • 这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
   • 即使查询到的元素只有一个，也会封装到数组中返回
4. 打印 lis
5. 遍历数组

//为id为btn02的按钮绑定一个单机响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {//查找所有li节点//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//打印lis//alert(lis.length);//遍历数组for (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}
};

2.3 查找 name=gender 的所有节点

1. 为 id 为 btn03 的按钮绑定一个单机响应函数
2. 查找 name=gender 的所有节点
3. innerHTML 用于获取元素内部的 HTML 代码的
   • 对于自结束标签,这个属性没有意义
4. 如果需要读取元素节点的属性
   • 直接使用元素.属性名
   • 例子: 元素.id 元素.name 元素.value
   • 注意:class 属性不能采用这种方式
   • 读取 class 属性时需要使用 元素.className

//为id为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用于获取元素内部的HTML代码的*  对于自结束标签,这个属性没有意义*///alert(inputs[i].innerHTML);/** 如果需要读取元素节点的属性，*  直接使用元素.属性名*  	例子: 元素.id  元素.name  元素.value*  	注意:class属性不能采用这种方式*  		读取class属性时需要使用 元素.className*  	*/alert(inputs[i].className);}
};

2.4 查找 #city 下所有 li 节点

1. 为 id 为 btn04 的按钮绑定一个单机响应函数
2. 获取 di 为 city 的节点
3. 查找#city 下所有 li 节点

//为id为btn04的按钮绑定一个单机响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){//获取di为city的节点var city = document.getElementById("city");//查找#city下所有li节点var lis = city.getElementsByTagName("li");for(var i=0; i<lis.length; i++){alert(lis[i].innerHTML);}
};

2.5 返回 #city 的所有子节点

1. 返回 id 为 btn05 的按钮来绑定一个单机响应函数
2. 获取 id 为 city 的节点
3. 返回#city 的所有子节点
4. childNodes 属性会获取包括文本节点在内的所有节点
   • 根据 DOM 标准婊气那种的空白也会当成文本节点
   • 注意: 在 IE8 及以下的浏览器中，不会将空白当成子节点，
   • 所以该属性在 IE8 的长度中会返回 4 个子元素而其他浏览器是 9 个
5. children 属性可以获取当前元素的所有子元素

//返回id为btn05的按钮来绑定一个单机响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){//获取id为city的节点var city = document.getElementById("city");//返回#city的所有子节点/** childNodes属性会获取包括文本节点在内的所有节点* 根据DOM标准婊气那种的空白也会当成文本节点* 注意: 在IE8及以下的浏览器中，不会将空白当成子节点，*  所以该属性在IE8的长度中会返回4个子元素而其他浏览器是9个*/var cns = city.childNodes;alert(cns.length);/* for(var i=0; i/** children属性可以获取当前元素的所有子元素*/var cns2 = city.children;alert(cns2.length);
};

2.6 返回 #phone 的第一个子节点

1. 为 id 为 btn06 的按钮绑定一个单机响应函数
2. 获取 id 为 phone 的元素
3. 返回#phone 的第一个子节点
4. firstChild 可以获取到当前元素的第一个子节点(包括空白文本节点)
5. firstElementChild 获取当前元素的第一个子元素
   • firstElementChild 不支持 IE8 及以下的浏览器，
   • 如果需要兼容他们尽量不要使用

//为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);
};

2.7 返回 #bj 的父节点

1. 为 id 为 btn07 的按钮绑定一个单击响应函数
2. 获取 id 为 bj 的节点
3. 返回#bj 的父节点
4. innerText该属性可以获取到元素内部的文本内容
   • 它和 innerHTML 类似，不同的格式它会自动将 html 标签去除

//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function(){//获取id为bj的节点
var bj = document.getElementById("bj");//返回#bj的父节点
var pn = bj.parentNode;//alert(pn.innerHTML);/** innerText*  - 该属性可以获取到元素内部的文本内容*  - 它和innerHTML类似，不同的格式它会自动将html标签去除*/
alert(pn.innerText);});

2.8 返回 #android 的前一个兄弟节点

1. 为 id 为 btn08 的按钮绑定一个单击响应函数
2. 获取 id 为 android 的元素
3. 返回#android 的前一个兄弟节点(也可能会获取到空白的文本)
4. previousElementSibling 获取前一个兄弟元素,IE8 及以下不支持

//为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);});

2.9 返回 #username 的 value 属性值

1. 读取#username 的 value 属性值
2. 获取 id 为 username 的元素
3. 读取 um 的 value 的属性值
4. 文本框的 value 属性值，就是文本框中填写的内容

//读取#username的value属性值
myClick("btn09",function(){//获取id为username的元素var um = document.getElementById("username");//读取um的value的属性值//文本框的value属性值，就是文本框中填写的内容alert(um.value);});

2.10 设置 #username 的 value 属性值

1. 设置#username 的 value 属性值
2. 获取 id 为 username 的元素

//设置#username的value属性值
myClick("btn10",function(){//获取id为username的元素var um = document.getElementById("username");um.value = "今天天气真不错~~~";
});

2.11 返回 #bj 的文本值

1. 返回#bj 的文本值
2. 获取 id 为 bj 的元素
3. 获取 bj 中的文本节点

//返回#bj的文本值
myClick("btn11",function(){//获取id为bj的元素var bj = document.getElementById("bj");//alert(bj.innerHTML);//alert(bj.innerText);//获取bj中的文本节点/* var fc = bj.firstChild;alert(fc.nodeValue); */alert(bj.firstChild.nodeValue)});

3. 完整代码实现

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 Documenttitle><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}window.onload = function () {//1 查找 #bj 节点var btn01 = document.getElementById("btn01");btn01.onclick = function () {var bj = document.getElementById("bj");alert(bj.innerHTML);};//2 查找所有 li 节点var btn02 = document.getElementById("btn02");btn02.onclick = function () {var lis = document.getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}};//3 查找 name=gender 的所有节点var btn03 = document.getElementById("btn03");btn03.onclick = function () {var inputs = document.getElementsByName("gender");for (var i = 0; i < inputs.length; i++) {alert(inputs[i].className);}};//4 查找 #city 下所有 li 节点var btn04 = document.getElementById("btn04");btn04.onclick = function () {var city = document.getElementById("city");var lis = city.getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}};//5 返回 #city 的所有子节点var btn05 = document.getElementById("btn05");btn05.onclick = function () {var city = document.getElementById("city");var cns = city.childNodes;alert(cns.length);var cns2 = city.children;alert(cns2.length);};//6 返回 #phone 的第一个子节点var btn06 = document.getElementById("btn06");btn06.onclick = function () {var phone = document.getElementById("phone");var fir = phone.firstChild;alert(fir);};//7 返回 #bj 的父节点myClick("btn07", function () {var bj = document.getElementById("bj");var pn = bj.parentNode;alert(pn.innerText);});//8 返回 #android 的前一个兄弟节点myClick("btn08", function () {var and = document.getElementById("android");var ps = and.previousSibling;alert(ps);});//9 返回 #username 的 value 属性值myClick("btn09", function () {var um = document.getElementById("username");alert(um.value);});//10 设置 #username 的 value 属性值myClick("btn10", function () {var um = document.getElementById("username");um.value = "今天天气真不错~~~";});//11 返回 #bj 的文本值myClick("btn11", function () {var bj = document.getElementById("bj");alert(bj.firstChild.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>IOSli><li id="android">Androidli><li>Windows Phoneli>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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！