JS原生DOM基本操作(上)

最新推荐文章于 2023-05-26 17:47:25 发布

原创最新推荐文章于 2023-05-26 17:47:25 发布 · 459 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JS 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JavaScript中通过id、类名和选择器获取元素的方法，包括getElementById、getElementsByClassName、getElementsByTagName和querySelector/querySelectorAll，同时涵盖元素内容操作、属性管理、类名与样式设置等核心知识点。

一.获取元素

1.根据id名称获取元素
语法：document.getElementById(‘id名称’)
作用：获取文档流中id对应的一个元素
返回值：

如果有id对应的元素，就是这个元素
如果没有id对应的元素，就是null

    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据id获取元素赋值给a
        var a=document.getElementById('container')
        console.log(a)
    </script>

在这里插入图片描述
2.根据元素类名获取元素
语法：document.getElementsByClassName(‘元素类名’)
作用：获取文档流中所有类名对应的元素
返回值：必然是一个伪数组

如果有类名对应的元素，有多少获取多少
如果没有对应的元素，空的伪数组

    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据class获取元素赋值给a
        var a=document.getElementsByClassName('box')
        console.log(a)
    </script>

在这里插入图片描述
3.根据标签名获取元素
语法：document.getElementsByTagName(‘标签名’)
作用：获取文档流中所有标签名对应的元素
返回值：必然是一个伪数组

如果有类名对应的元素，有多少获取多少
如果没有对应的元素，空的伪数组

    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据标签名获取元素赋值给a
        var a=document.getElementsByTagName('div')
        console.log(a)
    </script>

在这里插入图片描述
4.根据选择器获取元素
语法：document.querySelector(‘选择器’)
作用：获取文档流中满足选择器规则的第一个元素
返回值：

如果有选择器对应的元素，获取到第一个
如果没有选择器对应的元素，就是null

    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据选择器获取元素赋值给a
        var a=document.querySelector('div')
        console.log(a)
    </script>

在这里插入图片描述
5.通过选择器获取一组元素
语法：document.querySelectorAll(‘选择器’)
作用：获取文档流中所有满足选择器规则的元素
返回值：必然是一个伪数组

如果有类名对应的元素，有多少获取多少
如果没有对应的元素，空的伪数组

    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        //根据选择器获取元素赋值给a
        var a=document.querySelectorAll('.box')
        console.log(a)
    </script>

在这里插入图片描述
以上就是js获取元素的5种方法

获取完元素，接下来就可以对元素进行一些操作了

二.操作元素内容

1.操作元素文本内容

获取：元素.innerText
设置：元素.innerText=‘新内容’

    <button>操作</button>
    <div>
        <p>文本内容</p>
    </div>

    <script>
        //获取元素
        var btn=document.querySelector('button')
        var ele=document.querySelector('div')
        //获取元素的文本内容
        console.log(ele.innerText)
        //给按钮绑定点击事件
        btn.onclick=function(){
            //改变元素的文本内容
            ele.innerText='改变后的内容'
        }
    </script>

在这里插入图片描述
2.操作元素超文本内容

获取：元素.innerHTML
设置：元素.innerHTML=‘新内容’

    <button>操作</button>
    <div>
        <p>文本内容</p>
    </div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var ele=document.querySelector('div')
        //获取元素的文本内容
        console.log(ele.innerHTML)
        //给按钮绑定点击事件
        btn.onclick=function(){
            //改变元素的文本内容
            ele.innerHTML='<span>改变后的内容</span>'
        }
    </script>

在这里插入图片描述

三.操作元素属性

1.原生属性

获取：元素.属性名
设置：元素.属性名=‘属性值’

属性名

    <button>操作</button>
    <div id="box">div标签</div>
    <input type="password">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //获取元素属性
        console.log(box.id)
        console.log(inp.type)
    </script>

在这里插入图片描述
设置

    <button>操作</button>
    <div id="box">div标签</div>
    <input type="password">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //给元素绑定点击事件
        btn.onclick=function(){
            //修改元素属性
            box.id='screen'
            inp.type='checkbox'
        }
    </script>

在这里插入图片描述

2.自定义属性

获取：元素.getAttribute(‘属性名’)
修改：元素.setAttribute(‘属性名’,‘属性值’)
删除：元素.removeAttribute('属性名’)

获取

    <button>操作</button>
    <div id="box">div标签</div>
    <input type="password" hello="world">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //获取元素自定义属性
        console.log(inp.getAttribute('type'))
        console.log(inp.getAttribute('hello'))
    </script>

在这里插入图片描述
修改

    <button>操作</button>
    <div id="box">div标签</div>
    <input type="password" hello="world">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //绑定点击事件
        btn.onclick=function(){
            //修改自定义属性
            inp.setAttribute('hello','你好')
        }
    </script>

在这里插入图片描述
删除

    <button>操作</button>
    <div id="box">div标签</div>
    <input type="password" hello="world">
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        var inp=document.querySelector('input')
        //绑定点击事件
        btn.onclick=function(){
            //删除自定义属性
            inp.removeAttribute('hello')
        }
    </script>

在这里插入图片描述

四.操作元素类名

获取：元素.className
设置：元素.className=‘新内容’

获取

    <button>操作</button>
    <div class="content">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //获取类名
        console.log(box.className)
    </script>

在这里插入图片描述
设置

    <button>操作</button>
    <div class="content">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //绑定点击事件
        btn.onclick=function(){
            //修改类名
            box.className='screen'
        }
    </script>

在这里插入图片描述

五.操作元素行类样式

获取：元素.style.样式名
设置：元素.style.样式名=‘样式值’

获取

    <button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //获取样式
        console.log(box.style.width)
        console.log(box.style.height)
        console.log(box.style.backgroundColor)
    </script>

在这里插入图片描述
设置

    <button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //绑定点击事件
        btn.onclick=function(){
            //修改样式
            box.style.backgroundColor='red'
        }
    </script>

在这里插入图片描述

六.获取元素非行内样式

获取：window.getComputedStyle(元素).样式名

ps:可获取行内样式，也可取非行内样式，不能设置非行内样式

获取

    <button>操作</button>
    <div style="width: 100px;height: 100px;background-color: burlywood;">div标签</div>
    <script>
        //获取元素
        var btn=document.querySelector('button')
        var box=document.querySelector('div')
        //获取非行内样式
        console.log(window.getComputedStyle(box).height)
    </script>

在这里插入图片描述