JS_DOM操作之操作标签

<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>

1 - 文本操作

<div class="c1"><span>click</span></div>

<script>

    var ele =document.querySelector(".c1");

    ele.onclick = function (){
        // 查看标签文本
        console.log(this.innerHTML)
        console.log(this.innerText)
    }

    ele.onclick = function (){
        // 设置标签文本
        this.innerHTML = "<a href='#'>yuan</a>"
        //this.innerText = "<a href='#'>yuan</a>"
    }


</script>

2 - value操作：像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定

<input type="text" id="i1" value="yuan">
    <textarea name="" id="i2" cols="30" rows="10">123</textarea>
    <select  id="i3">
        <option value="hebei">河北省</option>
        <option value="hubei">湖北省</option>
        <option value="guangdong">广东省</option>
    </select>

<script>

    // input标签
    var ele1 =document.getElementById("i1");
    console.log(ele1.value);
    ele1.onmouseover = function (){
        this.value = "alvin"
    }

    // textarea标签
    var ele2 =document.getElementById("i2");
    console.log(ele2.value);
    ele2.onmouseover = function (){
        this.innerText = "welcome to JS world！"
        this.value = "welcome to JS world！"
    }
    // select标签
    var ele3 =document.getElementById("i3");
    console.log(ele3.value);
    ele3.value= "hubei"

</script>

3 - 属性操作

elementNode.setAttribute("属性名","属性值")    
elementNode.getAttribute("属性名")       
elementNode.removeAttribute("属性名");

4 - class属性操作

elementNode.className
elementNode.classList.add
elementNode.classList.remove

5 - CSS 样式操作

<p id="i1">Hello world!</p>


<script>
    var ele = document.getElementById("i1");
    ele.onclick = function (){
        this.style.color = "red"
    }
</script>

6 - 节点操作

// 创建节点：
document.createElement("标签名")
// 插入节点
somenode.appendChild(newnode)             // 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点)   // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()：获得要删除的元素，通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);

7 - 案例展示：

（1）tab 切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .tab{
            width: 800px;
            height: 300px;
            /*border: 1px solid rebeccapurple;*/
            margin: 200px auto;
        }

        .tab ul{
            list-style: none;
        }

        .tab ul li{
            display: inline-block;
        }

        .tab_title {
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }

        .tab .tab_title li{
            padding: 10px 25px;
            font-size: 14px;
        }

        .tab .tab_title li.current{
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }

        .tab_con li.hide{
            display: none;
        }

    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>

<div class="tab">
    <ul class="tab_title">
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评论</li>
    </ul>

    <ul class="tab_con">
        <li>商品介绍...</li>
        <li class="hide">规格与包装...</li>
        <li class="hide">售后保障...</li>
        <li class="hide">商品评论...</li>
    </ul>
</div>

<script>
    // JS版本

    var titles  = document.querySelectorAll(".tab_title li")
    var cons  = document.querySelectorAll(".tab_con li")

    for (var i =0;i<titles.length;i++){
        titles[i].setAttribute("item-index",i)

        titles[i].onclick = function (){
               console.log(this)

               // 去掉current样式
               for (var x=0;x<titles.length;x++){
                   titles[x].classList.remove("current")
               }
               // 加上current样式
               this.classList.add("current");


               var index = this.getAttribute("item-index")
               // 隐藏所有内容
               for (var j=0;j<cons.length;j++){
                   cons[j].style.display = "none";
               }
               // 显示对应内容
               cons[index].style.display = "block";
        }
    }

</script>

</body>
</html>

（2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

    </style>
</head>
<body>

<button class="add">添加节点</button>
<button class="rem">删除节点</button>
<button class="rep">替换节点</button>
<div class="region">
<h3 class="hi">hi,yuan</h3>
</div>


<script>
var add = document.getElementsByClassName("add")[0];
var rem = document.getElementsByClassName("rem")[0];
var rep = document.getElementsByClassName("rep")[0];
var region = document.getElementsByClassName("region")[0];


// 添加节点
add.onclick = function (){
    // 创建节点对象
    var img = document.createElement("img")  // <img>
    img.src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1234940918,4035050611&fm=26&gp=0.jpg"
    // 添加节点
    region.appendChild(img);
}

// 删除节点
rem.onclick = function (){
    var del_ele = document.querySelector("img");
    region.removeChild(del_ele);
}

// 替换节点
rep.onclick =function (){
    // 新节点
    var hi = document.createElement("h2")  // <img>
    hi.innerHTML = "HI,YUAN!"
    // 替换节点
    var rep_ele = document.querySelector(".hi");
    region.replaceChild(hi,rep_ele);
}


</script>


</body>
</html>