<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- 使ie以IE8的模式运行 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > <script type="text/javascript">
/** * 得到页面元素节点的几种方式 */
//通过id选择器去得到 function getDom01() { //获取一个 var div = document.getElementById("box1"); console.log(div); }
//通过标签名得到元素 function getDom02(){ //会得到所有的 与名字相同的标签 var divs = document.getElementsByTagName("div"); console.log(divs[0]); } //根据名字得到 function getDom03(){ //只能得到 原生就有name属性的元素 不能是自定义的 var div = document.getElementsByName("box2"); document.getElementsByClassName("box1"); console.log(div[0]); } //IE7 以及以前的版本 不支持 function getDom04(){ var div = document.querySelector("#box1"); console.log(div); } //IE7 以及以前的版本 不支持 function getDom05(){ var span = document.querySelectorAll(".box > span"); console.log(span.length); } </script> <style type="text/css"> .box{ border: 1px solid red; width: 450px; height: 100px; }
.box span{ border-left: 1px solid green; border-right: 1px solid green; margin: 0 10px; padding: 0 5px; } </style></head><body><input type="button" onclick="getDom01()" value="getDom01"/><input type="button" onclick="getDom02()" value="getDom02"/><input type="button" onclick="getDom03()" value="getDom03" name="box2"/><input type="button" onclick="getDom04()" value="getDom04" name="box2"/><input type="button" onclick="getDom05()" value="getDom05" name="box2"/><hr/><div class="box" id="box1" name="box2"> <span>this is a span in div</span> <span>this is a span in div</span> <span>this is a span in div</span> <span>this is a span in div</span></div></body></html>
时间： 2024-10-12 16:15:57