<标签名 属性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操作之操作标签的更多相关文章

  1. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  2. 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  3. 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

    1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...

  4. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  5. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  6. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  7. 超级管理员登录后如果连续XX分钟没有操作再次操作需要重新登录

    首先在设置session页面时 session_start(); session("name",$adminname); //加入session时间 time() session( ...

  8. swift语言之多线程操作和操作队列（下）———坚持51天吃掉大象（写技术文章）

    欢迎有兴趣的朋友,参与我的美女同事发起的活动<51天吃掉大象>,该美女真的很疯狂,希望和大家一起坚持51天做一件事情,我加入这个队伍,希望坚持51天每天写一篇技术文章.关注她的微信公众号: ...

  9. C#DataTable 的一些操作经常操作

    关于C# DataTable 的一些操作 经常操作DATATABLE  对于一些不需要再通过sql 来重复操作的   可以通过操作datatable来达到同样的效果 方法一: 也是广为人知的一种: Y ...

  10. [置顶] MongoDB 分布式操作——分片操作

    MongoDB 分布式操作——分片操作 描述: 像其它分布式数据库一样,MongoDB同样支持分布式操作,且MongoDB将分布式已经集成到数据库中,其分布式体系如下图所示: 所谓的片,其实就是一个单 ...

随机推荐

  1. phpmyadmin error:#2002 - 服务器没有响应 (或者本地 MySQL 服务器的套接字没有正确配置)

    1. 将 "phpMyAdmin/libraries"文件夹下的config.default.php文件中的$cfg['Servers'][$i]['host'] = 'local ...

  2. 创建函数function

    1.创建普通函数 function 函数名称(){ 函数体://封装的代码 } 函数名称()://调用函数 function getSum(){ for(var i=1,sum=0;i<=100 ...

  3. Ghost ，博客系统代名词

    Ghost 博客系统是前 WordPress 的一些优秀员工的创业项目.项目仍然采用 100% 开源,加上官方的收费托管的商业模式,目前已经发展成为一个非常的博客系统. 为了更好的方便读者理解 Gho ...

  4. MySQL 创建高性能索引

    索引是存储引擎用于快速找到记录的一种数据结构.除了加速查找,索引在其他方面也有一些有用的属性.索引对于良好的性能非常关键.尤其是当表中的数据量越来越大时,索引对性能的影响愈发重要.在数据量较小且负载较 ...

  5. Centos配置网络和主机映射

    目录 虚拟机网络的三种配置方式 配置虚拟机IP 主机映射问题 配置虚拟机的主机名 虚拟机远程登录 虚拟机网络的三种配置方式 桥接模式:当前虚拟机与主机在同一个局域网下,同一个局域网下的所有电脑都可以访 ...

  6. git常用命令究极记忆大法

    第一点,我觉得也是最最重要的,就是明确git的三个区,工作区(working),暂存区(index),仓库(repository). 第二就是区与区之间的操作了. working与index之间: g ...

  7. HCNA Routing&Switching之广域网协议HDLC和PPP

    前文我们了解了地址转换技术NAT相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15168042.html:今天我们来聊一聊广域网中的两个二层封装协议H ...

  8. luogu P2473 奖励关

    奖励关 看到数据范围,想到状压,那问题就是如何设计方程 设\(dp[i][j]\)表示在第\(i\)轮的时候,状态为\(j\)时的最优策略所拿的分值,\(j\)的二进制下为1的位置,表示选了这个宝物, ...

  9. 算法入门 - 基于动态数组的栈和队列(Java版本)

    之前我们学习了动态数组的实现,接下来我们用它来实现两种数据结构--栈和队列.首先,我们先来看一下栈. 什么是栈? 栈是计算机的一种数据结构,它可以临时存储数据.那么它跟数组有何区别呢? 我们知道,在数 ...

  10. SpringBoot集成Druid

    maven <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-b ...