【前端学习】Day-17 DOM基本操作、js操作浏览器窗口

ChenAi140

已于 2022-07-15 17:34:42 修改

阅读量131

点赞数

分类专栏：前端学习文章标签： javascript 前端学习

于 2022-07-15 17:26:57 首次发布

本文链接：https://blog.csdn.net/ChenAi_140/article/details/125809194

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1. DOM获取节点

DOM（document object model）
js提供了一个document，指向的是HTML，在js中通过document对象
可以直接或者间接获取页面内容对应的标签。

DOM操作具体内容 - 操作节点（节点就是标签）

直接获取节点
document.getElementById(id属性值)
通过id属性值获取标签
- getElementsByClassName(class属性值)
- getElementsByTagName(标签名)
获取父节点：
节点.parentElement - 获取指定节点的父节点
获取子节点：节点.children - 获取指定节点的所有子节点。
- 节点.firstElementChild - 获取指定节点的第一个子节点。
- 节点.lastElementChild - 获取指定节点的最后一个子节点。
添加节点
删除节点

<body>
    <div id="box1">
        <p id="p1">段落1</p>
    </div>
    <div id="box2">
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <p id="p2">段落2</p>
    </div>
    <div id="box3">
        <p id="p3">段落3</p>
    </div>

    <script type="text/javascript">
        p1 = document.getElementById('p1')
        console.log(p1)
        p1.style.color = 'red'
        // p1.style = 'color: red;'

        p2 = document.getElementsByTagName('p')
        console.log(p2)
        colors = ['blue', 'green', 'pink']
        for (x in p2) {
            p2[x].style = `color:${colors[x]};`
        }

        div1 = document.getElementById('p1').parentElement
        console.log(div1)
    </script>
</body>

2. 添加节点

<body>
    <!-- 在div变迁前面添加span标签 -->
    <script>
        document.write('<span>aaa</span>')
    </script>

    <div id="div1">
        <p id="p1">段落</p>
    </div>

    <!-- 在div标签后面添加span标签 -->
    <script>
        document.write('<span>bbb</span>')
    </script>

    <!-- 在div标签里面的p标签前面插入a标签 -->
    <script>
        a = document.createElement('a')
        p = document.getElementById('p1')
        div1 = document.getElementById('div1').insertBefore(a, p)
    </script>
</body>

3. 删除节点

<body>
    <p id="p1">段落1</p>
    <p id="">段落2</p>
    <p id="">段落3</p>
    <p id="">段落4</p>

    <script>
        // remove() - 删除节点
        // 节点.remove
        p1 = document.getElementById('p1')
        p1.remove()

        p = document.getElementsByTagName('p')
        console.log(p)
        p[1].remove()
    </script>
</body>

4. 向节点中添加内容和属性

<body>
    <a>百度<b>一下</b></a><br>
    <a href="" id="a2" class="a2"> 22</a>

    <script>
        a1 = document.getElementsByTagName('a')
        // 添加内容
        a1[0].innerText = 'HTML'
        a1[0].innerText = 'HTML<b>CSS</b>'
        a1[0].innerHTML = 'HTML_1'

        // 添加标签
        a1[0].innerHTML = 'HTML<b>CSS</b>'

        // 添加属性
        a1[0].href = 'https://www.baidu.com'
        a1[0].target = '_blank'
        // class属性未变，id属性发生了变化
        a1[1].class = 'aa'
        // 修改class的属性值用className
        a1[1].className = 'AA'
        a1[1].id = 'aa'
    </script>
</body>

5. JavaScript操作浏览器窗口

<body>
    <script>
        // 打开浏览器新标签页：window.open()
        function openwindow_1() {
            w_1 = window.open('https://www.baidu.com')
        }

        // 关闭刚打开的新标签页
        function close_1() {
            w_1.close()
        }

        // 打开新窗口
        function openwindow_2() {
            w_2 = window.open('https://www.baidu.com', '_blank', 'width=1920, heigth=1080')
            // w_2.moveTo(500,200)
        }

        // 关闭刚打开的新标签页
        function close_2() {
            w_2.close()
        }

        // 关闭当前标签页
        function close_3() {
            window.close()
        }

        // 页面滚动
        function to_bottom() {
            y = 0
            y_max = 5000
            while (y <= y_max) {
                y += 500
                // window.scrollTo(x,y)
                window.scrollTo(0, y)
            }
        }
    </script>

    <input type="submit" value="打开新窗口" onclick="openwindow_2()">
    <input type="submit" value="关闭新窗口" onclick="close_2()">
    <br>
    <br>
    <input type="submit" value="打开新标签页" onclick="openwindow_1()">
    <input type="submit" value="关闭新标签页" onclick="close_1()">
    <br><br>
    <input type="submit" value="关闭当前窗口" onclick="close_3()">
    <br><br>
    <input type="submit" value="页面滚动到底部" onclick="to_bottom()">


    <div style="height: 5000px;">

    </div>
</body>