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操作之操作标签的更多相关文章
- 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操作盒 ...
- 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）
DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...
- 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- JQuery DOM操作（属性操作/样式操作/文档过滤）
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- 超级管理员登录后如果连续XX分钟没有操作再次操作需要重新登录
首先在设置session页面时 session_start(); session("name",$adminname); //加入session时间 time() session( ...
- swift语言之多线程操作和操作队列（下）———坚持51天吃掉大象（写技术文章）
欢迎有兴趣的朋友,参与我的美女同事发起的活动<51天吃掉大象>,该美女真的很疯狂,希望和大家一起坚持51天做一件事情,我加入这个队伍,希望坚持51天每天写一篇技术文章.关注她的微信公众号: ...
- C#DataTable 的一些操作经常操作
关于C# DataTable 的一些操作 经常操作DATATABLE 对于一些不需要再通过sql 来重复操作的 可以通过操作datatable来达到同样的效果 方法一: 也是广为人知的一种: Y ...
- [置顶] MongoDB 分布式操作——分片操作
MongoDB 分布式操作——分片操作 描述: 像其它分布式数据库一样,MongoDB同样支持分布式操作,且MongoDB将分布式已经集成到数据库中,其分布式体系如下图所示: 所谓的片,其实就是一个单 ...
随机推荐
- VS2013导入新项目时，连接数据库问题。
用VS2013导入项目进行学习时,导入数据库会报数据库登陆不上的错误... 解决方法: 1.将其自带的数据库连接先删除,使用自己的sql server数据库将项目数据库先附加进去, 2.附加进去后,再 ...
- 浅析php环境配置
PHP作为开源的服务器端脚本语言,在web应用方面非常广泛.如果你想下载某些开源应用,github上php开源软件选择往往比Java还多.最近,研究了linux下php的安装,主要有以下体会. PHP ...
- 透视RPC协议：SOFA-BOLT协议源码分析
前提 最近在看Netty相关的资料,刚好SOFA-BOLT是一个比较成熟的Netty自定义协议栈实现,于是决定研读SOFA-BOLT的源码,详细分析其协议的组成,简单分析其客户端和服务端的源码实现. ...
- Java 17 将要发布，补一下 Java 13 中的新功能
本文章属于Java 新特性教程 系列,已经收录在 Github.com/niumoo/JavaNotes ,点个赞,不迷路. 自从 Oracle 调整了 Java 的版本发布节奏之后,Java 版本发 ...
- 化学专业大二转战Android开发，终于拥有了鹅厂暑期实习offer
我是双非学校,应用化学专业,一年前我大二,现在我大三.一年前我两手空空,现在我拥有了鹅厂暑期实习的offer. 虽然结果是好的,但我春招实习的道路远没有这么简单和辉煌,它是无比坎坷的:每个人应该量力而 ...
- Lock（锁）
Lock(锁) 从JDK 5.0开始,Java提供了更加强大的线程同步机制----通过显示定义同步锁对象来实现同步.同步锁使用Lock对象充当. java.util.concurrent.locks. ...
- 更好地使用Atom支持基于Jupyter的Python开发
有关于使用Atom进行Python开发的网上资料比较少,最近发现使用Atom结合Hydrogen插件进行Python开发,尤其是数据挖掘相关的工作,整体体验要好于Vscode,Vscode虽然说也有连 ...
- Maven 下载、安装与配置
一.需要准备的东西 确定电脑上已经成功安装JDK 二.下载与安装 1. 前往https://maven.apache.org/download.cgi下载最新版的Maven程序: 注意:Maven3. ...
- STM32—驱动BT-06蓝牙模块传输数据
文章目录 BT-06简介 数据透传 配置串口 USART1初始化函数 USART2初始化函数 USART2的NVIC配置 USART1串口重映射 BT-06简介 BT06蓝牙模块是专为智能无线数据传输 ...
- Django静态文件配置 request对象 Django操作MySQL
Django中的文件介绍 render.HttpResponse和redirect 当我们想起手写一个项目,创建好应用并且注册之后,在urls.py文件先导入app文件夹下migrations下的vi ...