document JS DOM

小咪咪 2022-06-03 09:23 159阅读 0赞

整理一些个人认为比较重要，或是不怎么常用的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>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript --- DOM document类型

Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访

Dear 丶/ 2023年02月11日 08:53/ 0 赞/ 22 阅读

相关 35-JavaScript-DOM-document对象

Document 对象 1. 概述每个载入浏览器的 HTML 文档都会成为 Document 对象。即, Document对象代表整个HT

阳光穿透心脏的1/2处/ 2022年09月18日 12:48/ 0 赞/ 175 阅读

相关 JavaScript DOM(二）之Document类型

Document类型简介 javaScript通过Document类型表示文档；因此我们称document 为文挡对象，在浏览器中， document对象是HTMLDoc

超、凢脫俗/ 2022年08月22日 15:12/ 0 赞/ 221 阅读

相关 DOM---文档对象模型（Document Object Model，简称DOM）

一、节点访问 1.getElementById var div1 = document . getElementById ( "div1" ); 2.getEl

客官°小女子只卖身不卖艺/ 2022年06月10日 19:59/ 0 赞/ 239 阅读

相关 javascript.dom-document对象

js的dom对象（\）\ \dom：document object model: 文档对象模型 \\ 文档：超文本文档（超文本标记文档） html 、xml

谁借莪１个温暖的怀抱￠/ 2022年06月04日 04:40/ 0 赞/ 222 阅读

相关 document JS DOM

整理一些个人认为比较重要，或是不怎么常用的DOM操作： <!DOCTYPE html> <html lang="en"> <head>

小咪咪/ 2022年06月03日 09:23/ 0 赞/ 160 阅读

相关 js_document

1. document 我们常说的dom是指：document object model 1) Document的属性 document.title //设置文档标题等价

旧城等待，/ 2022年05月25日 05:44/ 0 赞/ 151 阅读

相关 DOM(Document Object Model）

DOM（Document Object Model）：结点的概念：整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容。结点类型

柔光的暖阳◎/ 2022年01月10日 16:51/ 0 赞/ 186 阅读

相关 js BOM(window)和DOM(document)区别关系

声明在全局作用域的变量、函数属于window,可通过window.变量名调用 BOM和DOM的关系 ![在这里插入图片描述][watermark_type_ZmFuZ3p

素颜马尾好姑娘i/ 2021年07月24日 21:38/ 0 赞/ 428 阅读

相关 js document.activeElement获取焦点dom

刚开始时:document.activeElement指向body 之后将指向焦点元素:如点击的按钮、输入框等获取焦点元素: do

向右看齐/ 2021年07月24日 15:56/ 0 赞/ 355 阅读