document JS DOM
来源:互联网 发布:大数据魔镜 编辑:程序博客网 时间:2024/06/05 20:23
整理一些个人认为比较重要,或是不怎么常用的DOM操作:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.3.min.js"></script> <script> $(function () { /*console.log($(".a", $("#b"))); //只会取第一个 console.log(document.querySelector("#a")); console.log(document.querySelector(".a")); console.log(document.querySelector("div")); //会取所有 console.log(document.querySelectorAll(".a")); console.log(document.querySelectorAll("div"));*/ //支持多个选择符 //console.log(document.querySelector("#a, #b"));//只会取第一个 //console.log(document.querySelectorAll("#a, #b"));//两个都会取出来 //支持级联操作 //console.log(document.querySelector("#a .a")); //获取值 //console.log(document.querySelector("div > div").textContent);//a.a //console.log(document.querySelector("div#b > div").textContent);//b.a //console.log(document.querySelector("div ~ div").textContent);//a //设值 //document.querySelector("#b .a").textContent = "#b.a"; //console.log(document.querySelector("div.c"));//取不到时,返回 null /** * activeElement 返回文档中当前获得焦点的元素,默认是 BODY */ //console.log(document.activeElement.tagName); //document.querySelector("button").onclick = function (e) { // console.log(document.activeElement.tagName); //}; /** * anchors 返回了当前页面的所有锚点数组,没有为 [] */ //console.log(document.anchors);//[a, #a: a] }); </script></head><body> <div id="a"> <div class="a">a.a</div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="a">a</div> <div id="b"> <div class="a">b.a</div> </div> <button>按键</button> <a name="#a">a</a><!-- 没有 href 属性为锚点 --></body></html>
阅读全文