初始DOM操作

最新推荐文章于 2024-07-16 17:56:11 发布

不期望不希望不奢望

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量127

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_72101182/article/details/126199377

版权

1.DOM节点

HTML文档中的每个成分都是一个节点
整个文档是一个文档节点
每个 HTML标签是一个元素节点
包含在 HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点·注释属于注释节点

2.获取元素

<body>
    <div class="item">
        <!--这是一个注释-->
        这是一个div
        <span>这是一个span标签</span>
    </div>
    <input type="text" name="sex" id="uname">男
    <input type="text" name="sex" id="uname">女
    <a href="#" class="item">超链接</a>
    <div>这是第二个div</div>
    <script>
        //获取DOM中的节点,使用的是document对象//获取整个html文档
         console. log( document.documentElement)
        // 获取头部head 
        console.log ( document. head)/ //获取主体body
         console.log(document.body)
        //获取
         var body = document.body //获取到了body标签
         var div = body.firstElementChild //获取到body中的第一个元素console.log(div)
         var div_0 = body.firstChild
         console.log(div)
         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"))
        var divs = document.querySelectorAll("div")
            //通过循环可将一组元素打印输出
        for (var i = 0; i < divs.length; i++) {
            console.log(divs[i])
        }
    </script>
</body>

3.事件

1）事件源：事件被触发的对象（谁）例:button

2）事件类型（如何触发什么事件比如鼠标点击（onclick）

3）事件处理程序通过一个函数赋值的方式完成

4.自定义属性

<body>
    <input type="text" value="文本框" id="user">
    <div id="div_0" class="div" stuname="李四">这是一个div</div>
    <div id="div_1" data-index="1" data-sjl="男"></div>
    <script>
        // 获取标签的属性(自带的)
        // 第一张方式：元素名.元素值
        //第一步先找到标签，第二步 获取到该标签的属性
        var input = document.getElementById("user")
        console.log(input.value, input.type);
        //更改属性值
        input.value = "用户名"

        //自定义属性
        var div_0 = document.getElementById("div_0")
            // getAttribute()  获取标签的属性的值(包括一些自定义属性的值)
        console.log(div_0.getAttribute("stuname"));
        console.log(div_0.getAttribute("class"));
        // setAttribute() 添加属性和值
        div_0.setAttribute("stuid", "1001")
            //atributes：获取的是标签的自带的属性以及自定义属性
        console.log(div_0.attributes); //获取所有的
        console.log(div_0.attributes["id"]);

        //自定义属性:data-***
        //dataset:只能获取到data-**的属性
        console.log(div_1.dataset)
        console.log(div_1.dataset.index)
        console.log(div_1.dataset["sjl"])
    </script>
</body>

5.案例：点击button，实现密码隐藏或显示

<body>
    <input type="password" id="pwd">    
        //将函数绑定在button上
    <button onclick="fn1()">eyes</button>
    <script>
            //获取input
        var pwd = document.getElementById("pwd")

        function fn1() {
            if (pwd.type == "password") {
                pwd.type = "text"
            } else {
                pwd.type = "password"
            }
        }
    </script>
</body>