操作元素内容

元素内容指开始标签与结束标签之间的内容，单标签没有元素内容，表单标签除外。

操作闭合标签内容

闭合标签（双标签）的内容需要设置或修改，使用闭合标签的innerHTML属性。

innerHTML与innerText都可以操作标签内容，但innerHTML能识别标签，innerText不能被解析，所以innerText获取元素的纯文本内容。

语法：

1.设置标签的内容：标签.innerHTML = “内容”;

2.获取标签的内容：var text = 标签.innerHTML;

3.innerHTML和innerText会把节点元素中开始标签与结束标签之间的内容(内部所有的子级元素)全部替换。即会覆盖原本的内容。

4.如果想保留之前内容的，既：之前+现在。解决方案：1.标签.innerHTML = 标签.innerHTML+"内容";或者标签.innerHTML += "内容";2.创建一个元素，把现在的内容作为创建元素的innerHTML，然后把这个创建的元素添加到有之前内容的元素中。

    <div class="box-baba">
        <div class="box-son"></div>
    </div>
    <div class="box1">
        <a href="#">hello,world!</a>
    </div>
    <script>
        let box1=document.querySelector(".box1");
        let boxfather=document.querySelector(".box-baba");
        box1.innerText="777";
        boxfather.innerHTML="<h1>666</h1>";
        boxfather.innerHTML+="<h2>777</h2>"
    </script>

操作表单元素内容

操作表单元素用的是表单的value属性。

语法：

1.设置表单元素的内容：表单元素.value = “值”;

2.获取表单元素的内容：var a = 表单元素.value;

    输入密码：<input type="password" class="pwd">
    获取密码：<input type="text" class="text">
    <button class="btn">点击获取密码</button>
    <script>
        let btn=document.querySelector(".btn");
        btn.onclick=function(){
            let pwd=document.querySelector(".pwd");
            let text=document.querySelector(".text");
            let inputpwd=pwd.value;
            console.log(inputpwd);
            text.value=inputpwd;
        };
    </script>

点击按钮即可获取密码框里的内容，然后将输入的内容填充在密码框旁的文本框中。

ps:事件的绑定只能绑定在元素上，不能绑在元素的集合上。

操作元素属性

语法：

1.元素.属性名 = “属性值”;

2.class是个保留字，因此使用className来操作类名属性。classList是类名的列表，它使用两个函数来操作类名属性。add用于添加节点对象的类名，remove用于移除节点对象的类名。

3.className用于添加节点元素单个类名，classList用于添加节点元素多个类名，当添加相同的类名只会添加一个

    <div></div>
    <img src="./image/mmexport1646053900038.jpg" alt="">
    <button id="btn">change元素属性</button>
    <script>
        let btn=document.querySelector("#btn");
        btn.onclick=function(){
            let img=document.querySelector("img");
            img.src="./image/img-a30d63eab9eab3fc6c02db6696786196.jpg";
            let a1=document.querySelector("div");
            a1.id="divbox";
        };
    </script>

点击按钮之前

点击按钮之后

    <div id="box1"></div>
    <script>
        //获取DOM树中的元素
        let box1=document.querySelector("#box1");
        // box1.className="box2 box3";
        // box1.className="box2";
        // box1.className=box1.className+" box3";//此处box3前必须敲一个空格否则最后只添加了一个类名为box2box3
        box1.classList.add("box2");
        box1.classList.add("box2");
        box1.classList.add("box3");
     </script>

box1.className="box2 box3";等价于box1.className="box2";加上box1.className=box1.className+" box3";也等价于 box1.classList.add("box2");加上box1.classList.add("box3");

    <div id="box1"></div>
    <div id="div-box"></div>
    <script>
        let box=document.querySelector("#div-box");
        box.classList.add(box2);
        box.classList.add(box3);
        box.classList.remove(box2);
     </script>

操作元素样式

通过js可以修改元素的大小、颜色、位置等样式和cssText属性可以同时设置元素的多个行内样式。

ps：只有元素才能操作样式，元素集合不能操作样式。

语法：

1.元素.style.样式名 = “样式值”;

2.元素.style.cssText = "width:100px; height:100px;background:#ccc"

3.js里面的样式采取驼峰命名法代替CSS中的横线-，比如 fontSize和backgroundColor

4.js修改style样式操作时产生的是行内样式，css权重比较高。

    <div class="box1">
        <div class="box2"></div>
    </div>
    <script>
        let box1=document.getElementsByClassName("box1");
        let box2=document.getElementsByClassName("box2");
        console.log(box1)
        box1[0].style.backgroundColor="red";
        box1[0].style.width="600px";
        box1[0].style.height="500px";
        box2[0].style.cssText="width:400px;height:300px;background:blue";
    </script>