dom元素操作获取等

最新推荐文章于 2023-09-07 15:52:30 发布

VIP文章一只爱吃鱼的驴

最新推荐文章于 2023-09-07 15:52:30 发布

阅读量1.2k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_51525719/article/details/111026249

版权

一、DOM元素的获取

1）document.getElementsByClassName ( “class”)
返回集 htmlcollection ,用法和数组一致
说明: class为DOM元素上class属性的值
2）document.getElementById( “id” )
功能:返回对拥有指定ID的第一个对象的引用
返回值: DOM对象
说明: id为DOM元素上id属性的值
3)document.getElementsByName(" name");
返回的是nodelist 类型, 用法和数组一致
说明: name为DOM元素上name属性的值
4)document.getElementsByTagName(“TagName”);
返回的是htmlcollection 集合 , 用法和数组一致
5) document.querySelector(".btnlist");
返回的是集合
document.querySelectorAll("#btn");
获取所有的#btn
6)document.body
可以直接获取body

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn" class="btnlist" name="btn_n">点我一下</button>
<button id="btnn" class="btnof">点我一下</button>
<script>
    var btn =document.getElementsByClassName ("btnlist");
    console.log(btn[0]);

    var btn1=document.getElementsByName("btn_n");
    console.log(btn1[0]);

    var btn2=document.getElementById("btn");
    console.log(btn2);

    var btn3=document.getElementsByTagName("button");
    console.log(btn3[0]);

    var btn4=document.querySelector (".btnof");
    var btn5=document.querySelector ("#btnn");
    console.log(btn4);
    console.log(btn5);
   //querySelectorAll 返回的是集合
    var btn6=document.querySelectorAll ("#btnn");
    console.log(btn6[0]);

    /*可以直接获取body*/
    console.log(document.body);
</script>
</body>
</html>

1:修改属性
语法: ele.style.syleName=styleValue
功能：设置ele元素的CSS样式
2.获取对象的属性
console.log(btn1[0].style.height); //40px
3.js获取非行内样式属性
console.log(window.getComputedStyle(btn1[0]).width);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #btn{
   
            width:50px;
        }
    </style>
</head>
<body>
<button id="btn">点我</button>
<script>
    var btn1=document.getElementsByTagName("button");
    /*修改属性     -----js操作的属性都是行内样式 (设置或者获取)*/
    btn1[0].style.background="pink";
    btn1[0].style.height="40px";
    //获取对象的属性
    console.log(btn1[0].style.height); //40px

    //js获取非行内样式属性
    console.log(window.getComputedStyle(btn1[0]).width);

</script>
</body>
</html>

innerHTML

语法: ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML（获取标签的内容）
语法: ele.innerHTML=" html”
功能:设置ele元素开始和结束标签之间的HTML内容为html说明：
注：
不能使用”-”连字符形式font-size
使用驼峰命名形式：fontSize

className

语法: ele.className
功能:返回ele元素的class属性
注：
1.className是重新设置类，替换元素本身的class
2.如果元素有2个以上的class属性值,那么获取这个元素的className属性时,会将它的class属性值都打印出来

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>innerHTML</title>
    <style>
      .current{
   
            background-color:pink ;
            color:blue;
        }
        /*.on{
   border-bottom: 1px solid #7be052;}*/
    </style>
</head>
<body>
<div class="box" id="box">
    元素
</div>

最低0.47元/天解锁文章

一只爱吃鱼的驴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom元素操作获取等

一、DOM元素的获取1）document.getElementsByClassName ( “class”)返回集 htmlcollection ,用法和数组一致说明: class为DOM元素上class属性的值2）document.getElementById( “id” )功能:返回对拥有指定ID的第一个对象的引用返回值: DOM对象说明: id为DOM元素上id属性的值3)document.getElementsByName(" name");返回的是nodelist 类型, 用法和
复制链接

扫一扫