js dom 操作（二）

it2025-11-17 5

js dom 操作（二） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js中的dom(二)</title> <script type="text/javascript"> window.onload = function(){ var bj = document.getElementById("bj"); console.log(bj.innerHTML); //北京 console.log(bj.nodeName); //LI console.log(bj.nodeType); //I console.log(bj.nodeValue); //null // previousElementSibling 获取前一个兄弟元素，ie8以下不支持 var sh = document.getElementById("sh"); var item = sh.previousElementSibling; console.log(item.innerHTML) // previousSibling 获取前一个元素节点，也有可能是空白文本 item = sh.previousSibling; console.log(item) //[object Text] console.log(document.getElementById("username").value) }; </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li>东京</li> <li>首尔</li> </ul> <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>

最新回复(0)