js作用域、DOM和属性操作

最新推荐文章于 2024-11-01 13:37:40 发布

The hang 土豆

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量130

点赞数

文章标签：前端 javascript servlet

本文链接：https://blog.csdn.net/LiHang1234567777/article/details/126215013

版权

一、作用域

作用域：全员作用域和局部作用域

全员作用域：整个页面，只有当前页面关闭时，全员作用域才会失效

局部作用域：全局作用域中有划分出的小范围作用域，函数内部可以创建局部作用域，到目前为止，也只有函数内部可以创建局部变量

全局变量可以在函数内部进行访问，但是函数内部定义的变量不能在函数外部进行访问

例子如下：

var a = "张三"
 
        function test() {
            //用来计算两个数的和
            var result = 10 + 20
                // console.log(result)
            console.log(a)
                // return result
        }
        test()
function test_1() {
            var a = "李四" //变量采取的是就近原则
                // console.log(a)
            function test_2() {
                a = "王五"
            }
            // console.log(a)
        }
        test_1()
        console.log(a)
 
        function test_3() {
            num = 100
        }
        test_3()
        console.log(num) //自动转换成全局变量

二、DOM节点
文档对象模型（Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"“"浏览器大战"，双方为了在JavaScript与Script一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。

<body>
    <div class="item">
        <!-- 这是一个注释 -->
        这是一个div
        <span>这是一个span标签</span>
    </div>
    <input type="text" name="" id="uname">
    <a class="item" href="#">超链接</a>
    <input type="radio" name="sex" id="">男
    <input type="radio" name="sex" id="">女
    <div>
        这是第二个div
    </div>
    <script>
        //
 
        // 获取整个html文档
        console.log(document.documentElement)
            // 获取头部head
        console.log(document.head)
            // 获取主题body
        console.log(document.body)
    </script>
</body>

<body>
    <div class="item">
        <!-- 这是一个注释 -->
        这是一个div
        <span>这是一个span标签</span>
    </div>
    <input type="text" name="" id="uname">
    <a class="item" href="#">超链接</a>
    <input type="radio" name="sex" id="">男
    <input type="radio" name="sex" id="">女
    <div>
        这是第二个div
    </div>
    <script>.
    // 获取
        var body = document.body //获取到了body标签
        var div = body.firstElementChild //共获取到body中的第一个元素
        console.log(div)
        var div_0 = body.firstChild
        console.log(div_0)
        var lastEle = body.lastElementChild
        console.log(lastEle)
        console.log(div.nextElementSibling) //获取的是相邻两兄弟(下一个)
        var input = div.nextElementSibling
        console.log(input.previousElementSibling) //获取的是相邻兄弟（前一个）
 
        // 通过函数来获取元素
        // getElementById():通过标签的id属性的值获取到某个标签
        console.log(document.getElementById("uname"))
            // getElementsByClassName()：根据标签的class属性的值来获取一组标签
        console.log(document.getElementsByClassName("item"))
            // getElementsByName()：根据标签的name属性的值来获取一组标签
        console.log(document.getElementsByName("sex"))
            // getElementsByTagName()：根据标签名来获取一组标签
        console.log(document.getElementsByTagName("div"))
 
        // querySelector()；根据选择器名称来获取满足条件的并且是遇到的第一标签
        console.log(document.querySelector("div"))
        console.log(document.querySelectorAll("div"))
    </script>
</body>

<body>
    <div class="item">
        <!-- 这是一个注释 -->
        这是一个div
        <span>这是一个span标签</span>
    </div>
    <input type="text" name="" id="uname">
    <a class="item" href="#">超链接</a>
    <input type="radio" name="sex" id="">男
    <input type="radio" name="sex" id="">女
    <div>
        这是第二个div
    </div>
    <script>
        var divs = document.querySelectorAll("div")
            // 通过循环可以将一组元素打印输出
        for (var i = 0; i < divs.length; i++) {
            console.log(divs[i])
        }
        console.log(document.querySelector("#uname"))
        console.log(document.querySelector(".item"))
        console.log(document.querySelectorAll(".item"))
    </script>
</body>

添加、删除、修改DOM节点

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }
        
        ul li {
            width: 200px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
 
<body>
    <input type="button" value="添加节点" id="btnAdd" onclick="Add()">
    <input type="button" value="删除节点" id="btnDel" onclick="Del()">
    <input type="button" value="修改节点" id="btnUpdate" onclick="Update()">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        function Add() {
            var ul = document.querySelector("ul") //获取ul标签
                // 创建一个节点
            var li = document.createElement("li")
            li.innerHTML = "添加一个节点"
            ul.appendChild(li) //向便签内追加一个新的子元素
        }
 
        function Del() {
            // 删除节点removeChild()
            // 先获取到要删除的标签，然后在调用removeChild()
            var ul = document.querySelector("ul") //获取ul标签
            var li = ul.firstElementChild
            ul.removeChild(li)
                // ul.remove() //删除元素本身以及所有子元素
        }
 
        function Update() {
            var ul = document.querySelector("ul") //获取ul标签
            var li = ul.firstElementChild
            li.innerHTML = "<a href=#>这是更改后的超链接</a>"
                // li.innerText = "<a href=#>这是更改后的超链接</a>"
 
        }
    </script>
</body>
 
</html>