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>

巴特西

JS_DOM操作之操作标签

最新文章

热门文章