深圳做三网合一网站,大连头条热点新闻,优秀个人网站,wordpress ui 插件一、获得元素 通过document对象调用#xff1a; getElementById()#xff1a;通过id属性获取一个元素节点对象getElementsByTagName()#xff1a;通过标签名获取一组元素节点对象getElementsByName()#xff1a;通过name属性来获取一组元素节点对象 核心学习代码 scrip…一、获得元素 通过document对象调用 getElementById()通过id属性获取一个元素节点对象getElementsByTagName()通过标签名获取一组元素节点对象getElementsByName()通过name属性来获取一组元素节点对象 核心学习代码 script//完成下面的按钮的功能window.onload function() {var btn01 document.getElementById(btn01);// 为id为btn01的按钮绑定一个单击响应函数btn01.onclick function() {// 查找#bj节点var bj document.getElementById(bj);alert(bj.innerHTML);};// 查找所有li节点var btn02 document.getElementById(btn02);btn02.onclick function(){var lis document.getElementsByTagName(li);// getElementsByTagName获得的是一组元素节点对象for(var i 0;ilis.length;i){alert(lis[i].innerHTML);}};// 查找namegender的所有节点var btn03 document.getElementById(btn03);btn03.onclick function(){var inputs document.getElementsByName(gender);for (var i0;iinputs.length;i){// 对于自结标签可以直接通过标签名来获取// 对于class属性不能直接.class只能通过className方式alert(inputs[i].value);}}// 查找#city下所有li节点// 返回#city所有子节点// 返回#phone的第一个子节点// 返回#bj的父节点// 返回#android的前一个兄弟节点// 返回#username的value属性值// 设置#username的value属性值// 返回#bj的文本值}/script
代码示例
!doctype html
htmlheadmeta charsetutf-8title/titlescript//完成下面的按钮的功能window.onload function() {var btn01 document.getElementById(btn01);// 为id为btn01的按钮绑定一个单击响应函数btn01.onclick function() {// 查找#bj节点var bj document.getElementById(bj);alert(bj.innerHTML);};// 查找所有li节点var btn02 document.getElementById(btn02);btn02.onclick function(){var lis document.getElementsByTagName(li);// getElementsByTagName获得的是一组元素节点对象for(var i 0;ilis.length;i){alert(lis[i].innerHTML);}};// 查找namegender的所有节点var btn03 document.getElementById(btn03);btn03.onclick function(){var inputs document.getElementsByName(gender);for (var i0;iinputs.length;i){// 对于自结标签可以直接通过标签名来获取// 对于class属性不能直接.class只能通过className方式alert(inputs[i].value);}}// 查找#city下所有li节点// 返回#city所有子节点// 返回#phone的第一个子节点// 返回#bj的父节点// 返回#android的前一个兄弟节点// 返回#username的value属性值// 设置#username的value属性值// 返回#bj的文本值}/script/headbodydiv classtotaldiv classinnerp你喜欢哪一个城市/pul idcityli idbj北京/lili上海/lili东京/lili首尔/li/ulbr /br /p你最喜欢的单机游戏/pul idgameli idrl红警/lili实况/lili极品飞车/lili魔兽/li/ulbr /br /p你手机的操作系统/pul idphoneli idphoneIOS/lili idandroidAndroid/liliWindows Phone/li/ul/divdiv classinnergenner:input typeradio namegender valuemale /Male:input typeradio namegender valuefemale /Female:br /br /name:input typetext namename valueabcd //div/divdiv idbtnListdivbutton idbtn01查找#bj节点/button/divdivbutton idbtn02查找所有li节点/button/divdivbutton idbtn03查找namegender的所有节点/button/divdivbutton idbtn04查找#city下所有li节点/button/divdivbutton idbtn05返回#city所有子节点/button/divdivbutton idbtn06返回#phone的第一个子节点/button/divdivbutton idbtn07返回#bj的父节点/button/divdivbutton idbtn08返回#android的前一个兄弟节点/button/divdivbutton idbtn09返回#username的value属性值/button/divdivbutton idbtn10设置#username的value属性值/button/divdivbutton idbtn11返回#bj的文本值/button/div/div/body/html 效果图 对于DOM的查询内容知识点比较多分成几个部分学习这节学习主要掌握三个知识点。 上节学习链接 JavaScript的学习之文档的加载
