第13课——元素属性的获取与设置及简单DOM操作2.0

最新推荐文章于 2022-07-30 18:58:27 发布

のdestiny

最新推荐文章于 2022-07-30 18:58:27 发布

阅读量159

点赞数

分类专栏： js入门级文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42012745/article/details/121530418

版权

js入门级专栏收录该内容

23 篇文章 0 订阅

订阅专栏

弹框总结

弹框：会阻止后面的程序执行
1.alert();  弹出框，提示框

2.prompt("输入");提示输入框

3.confirm("");询问框
    一般有两个按钮，点击确定会返回true；点击取消会返回false。

元素的获取

1.操作类名className
    a.获取类名
        例: var divEle = document.querySelector("div") ; 
            console.log(divEle.className);//打印div元素中的class名
    b.设置类名
        例：var divEle = document.querySelector("div") ;
            divEle.className = "active"     //这里设置的class名会将div中原本存在class名覆盖掉
            如果想不改变原来样式，给class多设置一个类名
            可以用divEle.className += " active"//--注--这里的空格一定要有，实际上就是字符串的拼接操作

2.操作元素的属性    
    a.获取元素的属性值
        书写格式：元素名.getAttribute("属性名")
        例1: var res = boxEle.getAttribute("class"); //获取boxEle元素class的属性值，并将其赋值给res
             console.log(res);                       //打印获取的res
    应用：实现简单换肤效果
    例：
        <style>
            .active1 {
                background: url(./images/1.jpg) no-repeat center/500px 500px;
            }
            .active2 {
                background: url(./images/2.jpg) no-repeat center/500px 500px;
            }
        </style>
    </head>
    <body>
        <button>皮肤1</button>
        <button>皮肤2</button>
        <script>
            var btnEle = document.querySelectorAll("button") ;
            btnEle.forEach(function( item , key ){
                item.onclick = function (){
                    if ( key == 0 ) {
                        document.body.className = "active1" ;
                    } else if ( key == 1 ) {
                        document.body.className = "active2"
                    }
                }
            }) ; 
        </script>


        attributes  获取元素的所有属性值        获取到的是一个对象，如果需要得到某一个属性值，需要通过属性索引
        例2：var res = boxEle.attributes ; 
             console.log(res); 
                // 0: class
                // 1: id
                // 2: name
                // 3: myattr
                // class: class
                // id: id
                // myattr: myattr
                // name: name
                // length: 4
                // [[Prototype]]: NamedNodeMap

    b.设置属性
        书写格式：元素名.setAttribute("属性名","属性值");
        例: var divEle = document.querySelector("div");
            divEle.setAttribute("name","myAttri");

几个特殊的标签

1.html
    var htmlEle = document.querySelector("html");
    var htmlEle = document.documentElement;
    这两种写法都是获取html根元素，下面为简写

2.body
    var bodyEle = document.querySelector("body");
    var bodyEle = document.body;
    这两种写法都是获取body元素，下面为简写

3.head
    var headEle = document.querySelector("head");
    var headEle = document.head;
    这两种写法都是获取head元素，下面为简写

4.title
    var titleEle = document.querySelector("title");
    获取title元素
    var titleEle = document.title;
    获取title元素文本内容

5.表单元素的获取
    <input type="text" name="users" /> 
    可以通过name名称获取表单控件 input
    var inputEle = document.getElementsByName("users");

一些简单的DOM操作

一、增加元素：创建元素；    --注--创建的元素为对象类型
    获取创建的元素 
    例：    
            var ele = document.createElement("div");    //创建一个元素对象，并将创建的元素对象赋值给ele
            ele.innerHTML = "hello";                    //给新创建的对象文本赋值给hello
            ele.className = "active";                   //给新创建的对象class名赋值为active
            console.log(ele);                           //打印新创建的对象
    把元素对象添加到指定位置   父级元素.appendChild(元素对象);

        var containerEle = document.querySelector(".container");    //获取一个元素
        document.onclick = function () {                            //点击
            var p = document.createElement("p");                    //创建一个p标签，并将新创建的元素赋值给p
            p.innerHTML = "我是p标签";                              //p元素文本
            containerEle.appendChild(ele);                          //让ele元素成为containerEle元素下面的子元素
            containerEle.appendChild(p);                            //让p元素成为containerEle元素下面的子元素
        }
    

二、创建文本对象；createTextNode() :了解
    创建一个文本对象
    var text = document.createTextNode("1111");
    console.log(text);
    创建一个div元素
    var div = document.createElement("div");
    div.innerHTML = "1111"; //多数情况下都会用innerHTML或者是innerText来替代
    div.appendChild(text);          //将创建的文本添加到div元素中
    console.log(div);
    document.body.appendChild(div); //让元素div成为body的子元素

三 、innerHTML 和 appendChild的区别

    var containerEle = document.querySelector(".container");
    containerEle.innerHTML = `<div>1111</div>`;
    var div = document.createElement("div");
    div.innerHTML = "1111";
    containerEle.appendChild(div);
    containerEle.innerHTML = div; 错误的写法；

        1.innerHTML赋值操作 ，后面内容是字符串或者是数字；
        2.appendChild是函数执行的写法 ，appendChild添加的内容是对象类型

のdestiny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第13课——元素属性的获取与设置及简单DOM操作2.0

弹框总结弹框：会阻止后面的程序执行1.alert(); 弹出框，提示框2.prompt("输入");提示输入框3.confirm("");询问框一般有两个按钮，点击确定会返回true；点击取消会返回false。元素的获取1.操作类名className a.获取类名例: var divEle = document.querySelector("div") ; console.log(divEle.className);//打印
复制链接

扫一扫