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将分布式已经集成到数据库中,其分布式体系如下图所示: 所谓的片,其实就是一个单 ...
随机推荐
- js学习笔记之在数组中删除重复的元素自保留一个
遍历要删除的数组arr, 把元素分别放入另一个数组tmp中,在判断该元素在arr中不存在才允许放入tmp中 <script type="text/javascript"> ...
- PHP 后台数组数据 传输给前台JS 使用
一. PHP: $a = array('aaa','bbb'); $a= json_encode($a); JS: var a_json = {$a}; //此处a_json数组便可使用 二. H ...
- AWS 安全信息泄露-----21天烧了27万
安全问题一直都是个老生常谈的话题,对于我们做IT的来说,是更为重视的.从使用开发工具的是否授权合规,到从事的工作内容是否合法.我们都应该认真的思考一下这些问题,毕竟我们要靠IT这门手艺吃饭. 2021 ...
- 移植TensorFlow到Windows平台
2015年11月,Google宣布开源旗下机器学习工具TensorFlow,引发业界热潮.TensorFlow原生支持*unix系和安卓平台,但并不提供对Windows平台的支持.如果想在Window ...
- 用Python预测双色球福利彩票中奖号码（请不要当真）
前言 双色球是中国福利彩票的一种玩法. 红球一共6组,每组从1-33中抽取一个,六个互相不重复.然后蓝球是从1-16中抽取一个数字,这整个组成的双色球 python从零基础入门到实战 今天,我们就用P ...
- 浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
- linux命令打基础
目录 一.shell概述 二.linux命令分类 三.linux命令行 3.1 格式 3.2 编辑Linux命令行 四.Linux基础命令 4.1 pwd:查看当前的工作目录 4.2 cd:切换工作目 ...
- CTF_论剑场_Web25
点击xiazai后面发现404,没办法打开,抓包也没发现啥,用御剑扫描了下发现还有新的页面 点击会跳转到flag.php这个文件,这里应该才是真正的提交页面 另外前面提示了一个ziidan.txt在s ...
- 慕慕生鲜上线&&腾讯云服务器配置准备
1.购买服务器并配置环境 1.1 购买 618购买了腾讯云服务器三年最低配置(1核2G 1Mbps 50G云盘),一时激动忘记了购买前领优惠券,痛失25元. 1.2 环境配置 系统是 CentOS L ...
- awk-07-IO和printf语句
IO语句 1.getline 2.getline var 把a文件的行,追加到b文件的结尾 把 a 文件的行替换 b 文件的指定字段 把 a 文件的行替换 b 文件的对应字段 3.command | ...