获得元素document

javascript API笔记

获得元素document.

getElementById

var p1 = document.getElementById( ‘p1’ );
语法: document.getElementById( ‘id’ )
习惯: 写标签的时候, 属性使用 双引号, 写字符串的时候属性写 单引号

getElementsByTagName

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <p>111</p>
    <div>div</div>
    <p>222</p>
    <div>div</div>
    <p>333</p>
    <div>div</div>
</body>
 <script>
        // 获得所有的 p 标签, 然后打印出来
        var nodes = document.getElementsByTagName( 'p' );
    
    </script>

document.getElementsByTagName( ‘p’ );

getElementsByTagName

var div = document.getElementsByTagName( ‘div’ )[ 0 ];

querySelector

// 选择器 ( selector )
// -> 基本选择器: #id, .className, tagName, *
// -> 复合选择器: 子代选择器( > ), 后代选择器( ‘ ‘ ), …

    // 如果想到定位 这两个 p
    // #dv1 > p
    
    // 使用选择器获得元素的 语法
      // docuemnt.querySelector( '选择器的字符串' ) 获得所有的 符合选择器的元素中的 第 0 个

querySelectorAll

// document.querySelectorAll( ‘选择器字符串’ ) 获得所有的 符合选择器的元素( 伪数组 )

document.body

如果需要获得页面中的 body, 除了使用 get 或 query 系列的方法之外
还可以使用 document.body, 其就是 当前页面的 body 标签

children

使用 children 来获得元素的 子元素

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
    <ul id="menu">
        <li>
            <a href="#">测试</a>
            <ul>
                <li><a href="#">测试</a></li>
                <li><a href="#">测试</a></li>
            </ul>
        </li>
        <li>
            <a href="#">测试</a>
            <ul>
                <li><a href="#">测试</a></li>
                <li><a href="#">测试</a></li>
            </ul>
        </li>
    </ul>

    <script>
        // 使用传统的方法, 获得 主菜单的 a 标签
        // 可以使用 children 来获得元素的 子元素
        // 1> 拿到菜单的 容器 ( menu )
        // 2> 利用 children 来拿到容器中的 所有 li
        // 3> 循环遍历 li 找到每一个 li 中的 第 0 的子元素( children[ 0 ] )
        /*
        var menu = document.getElementById( 'menu' );
        var li_list = menu.children;
        // console.log( li_list );
        for ( var i = 0; i < li_list.length; i++ ) {
            var li = li_list[ i ]; // 就是每一个 一级菜单的 li 标签
            // console.log( li.children );
            var a = li.children[ 0 ];
            console.log( a );
        }
        */

        // 使用选择器
        var a_list = document.querySelectorAll( '#menu > li > a' );
        console.log( a_list );
    
    </scri
javascript API笔记
#Hexo
获得元素document
http://www.dwyblog.cn/2020/01/09/测试/
作者
幸福来敲门
发布于
2020年1月9日
许可协议