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将分布式已经集成到数据库中,其分布式体系如下图所示: 所谓的片,其实就是一个单 ...
随机推荐
- jquery 获取url地址参数
1 var url = document.URL; 2 var a = url.split("="); 3 4 if(a[1]){ 5 return options.fn(this ...
- 小技巧 | Get 到一个 Web 自动化方案，绝了！
1. 前言 大家好,我是安果! 无论是 Chrome,还是 Firefox 浏览器,它们的强大性在很大程度上都是依赖于海量的插件,让我们能高效办公 那我们是否可以编写一个插件,让浏览器自动化完成一些日 ...
- jadx的使用
使用jadx之前必须安装配置java环境才能正常打开运行 https://www.cnblogs.com/yhoil/p/14808648.html 一.前言 今天介绍一个非常好用的反编译的工具 ja ...
- 通过cmake在Android中调用c语言，且三方应用通过so库调用c语言
1. 新建JniUtils类实现native方法 2. 在build中执行clean project 再rebuild project 生成class文件. 注意:最新版本的AndroidStud ...
- Python -类型提示 Type Hints
为什么会有类型提示 Python是一种动态类型语言,这意味着我们在编写代码的时候更为自由,运行时不需要指定变量类型 但是与此同时 IDE 无法像静态类型语言那样分析代码,及时给我们相应的提示,比如字符 ...
- JavaScript学习05（操作DOM）
操作DOM DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被结构化为对象树: 通过这个对象模型,Java ...
- 【笔记】Ada Boosting和Gradient Boosting
Ada Boosting和Gradient Boosting Ada Boosting 除了先前的集成学习的思路以外,还有一种集成学习的思路boosting,这种思路,也是集成多个模型,但是和bagg ...
- SpringBoot开发二
需求介绍-Spring入门 主要是理解IOC,理解容器和Bean 代码 在Test里面利用getBean方法帮助我们看一下容器的创建: 那我首先要写一个Bean对象,假设是写一个访问数据库类. Alp ...
- ☕【Java技术指南】「并发原理专题」AQS的技术体系之CLH、MCS锁的原理及实现
背景 SMP(Symmetric Multi-Processor) 对称多处理器结构,它是相对非对称多处理技术而言的.应用十分广泛的并行技术. 在这种架构中,一台计算机由多个CPU组成,并共享内存和其 ...
- Bootstrap 使用小记
1,使用Bootstrap做页面布局,使用card容器 <div class="card"> <div class="card-header" ...