dom操作补充
s5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">
你好
<a>百<span>度</span></a>
</div>
<input type="text" id="i2"/>
<select id="i3">
<option value="11">北京</option>
<option value="12">上海</option>
<option value="13">广州</option>
</select>
<textarea id="i4"></textarea>
</body>
</html>
obj=document.getElementById('i1')
obj.innerText 只获取标签的文本
obj.innerHTML 获取标签里面的所有的，包括子标签
obj=document.getElementById('i1');
obj.innerHTML="<a href='http://www.qq.com'>腾讯</a>";
value 获取input标签中的值
obj=document.getElementById('i2');
obj.value="hyhskdk"
select:获取修改选中的value值
obj=document.getElementById('i3');
obj.value
obj.value=12
obj.selectedIndex=0 修改成第几个选项
textarea:多行文本操作
obj=document.getElementById('i4');
obj.value
obj.value=1233
s6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 600px;margin: 0 auto;">
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字">
<input type="text" placeholder="请输入关键字">
</div>
<script>
function Focus() {
var tag=document.getElementById('i1');
var val= tag.value;
if(val=="请输入关键字"){
tag.value="";
}
}
function Blur() {
var tag=document.getElementById('i1');
var val= tag.value;
if(val.length==0){
tag.value="请输入关键字";
}
}
</script>
</body>
</html>
对样式进行操作
obj=document.getElementById('i1');
obj.className="c1 c2"; 添加样式
obj.className 查询样式
obj.classList 查询样式并以列表的形式显示
obj.classList.add('c3') 添加样式
obj.classList.remove("c2") 移除样式
<div class="c1 c2" style="font-size: 16px";></div>
obj.style.fontSize='16px'; //更细致的某一个样式操作
obj.style.backgroundColor='red';
obj.style.color='green';
对属性进行操作
obj=document.getElementById("i1");
obj.setAttribute("name","alex"); 添加属性
obj.removeAttribute("value"); 删除属性
obj.attributes 获取所有的属性
创建标签并添加到html中
s8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="AddEle1();" value="+">
<input type="button" onclick="AddEle2();" value="+">
<div id="i1">
<p><input type="text"></p>
<!--<hr/> 分隔线标签-->
</div>
<script>
function AddEle1() {
//创建一个标签
//将标签添加到i1里面
var tag="<p><input type='text'/></p>";
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
function AddEle2() {
//创建一个标签
//将标签添加到i1里面
var tag=document.createElement('input'); //创建一个input标签
tag.setAttribute('type','text')
tag.style.fontSize="16px";
tag.style.color='red';
var p=document.createElement('p'); //创建p标签
p.appendChild(tag)
document.getElementById('i1').appendChild(p) //添加p标签
}
</script>
</body>
</html>
创建标签的两种形式:
AddEle1:字符串的形式
AddEle2:对象的方式
document.createElement('div') 创建div标签
dom操作补充的更多相关文章
- HTML JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- HTML--7JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- 课堂所讲整理：HTML--7JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- JavaScript的DOM操作（2）
补充: 回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...
- jQuery2.x源码解析(DOM操作篇)
jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ...
- JS中的函数、BOM和DOM操作
一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */ // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...
- 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- 3.25课·········JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- day45:JS中的json&JS的BOM操作和DOM操作
目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 ...
- BOM与DOM之DOM操作
目录 一:DOM操作 1.DOM介绍 2.DOM标准规定HTML文档中的每个成分都是一个节点(node): 3.DOM操作需要用关键字 二:查找标签 1.id查找 类查找 标签查找(直接查找) 2.i ...
随机推荐
- JUC并发—7.AQS源码分析三
大纲 1.等待多线程完成的CountDownLatch介绍 2.CountDownLatch.await()方法源码 3.CountDownLatch.coutDown()方法源码 4.CountDo ...
- linux报错-bash: ./xx.sh: Permission denied
linux报错-bash: ./xx.sh: Permission denied 在linux下执行sh文件时提示:-bash: ./xx.sh: Permission denied 进行授权:chm ...
- QT5笔记： 29. 文本文件读写
例子:主要讲了 QFile .QTextStream 进行文本文件读写 MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include ...
- 深入理解 Docker 容器技术
一.引言 在当今的云计算和软件开发领域,Docker 容器技术已经成为了一项不可或缺的工具.它极大地改变了应用程序的部署和运行方式,为开发者和运维人员带来了诸多便利. 二.Docker 容器是什么? ...
- 深度科普 - 大名鼎鼎的bun.js到底是什么? 它能否替代node.js? 是否能成为前端生态的未来?
什么是bun? 聪明的小伙伴们,你们在接触bun时是否有过这样的疑问呢? bun.js是什么? 它是如何诞生的? 跟node.js的区别是什么? 有什么优势? 目前的发展情况如何了? 他是否是前端的未 ...
- Easyexcel（2-文件读取）
同步读取 读取单个Sheet 通过sheet方法指定对应的Sheet名称或下标读取文件信息 通过doReadSync方法实现同步读取 @Data public class UserExcel { @E ...
- sap 管理--企业解决方案 -设备管理
1.什么是sap 管理 2.设备管理管的是什么 3.设备的几种状态 4.设备bom(物料清单) 5.测量点计数器 1.什么是sap 管理 System Applications and Product ...
- 【Pre】预习测试-Logisim/Verilog/MIPS
好家伙,开门挂 T2 字符自动机cscore 1.审题·惯性思维:直接输出了当前连续数,题目要求是最大连续数 -> [重新读题解决] 2.非阻塞赋值运用:若在always块内通过if(out1 ...
- 移动端 cordova vue videojs 全屏播放后退出全屏返回后退出app问题
问题描述 移动端上面使用了videojs 播放视频,同时也监听了手机返回事件document.addEventListener('backbutton',.接着我们点击全屏播放后在退出全屏在返回后直接 ...
- Grafana导入 json 文件的 dashboard 错误 Templating Failed to upgrade legacy queries Datasource xxx not found
前言 编辑或者修改后的 dashboard 保存为 json 文件,在其他环境导入使用,报错 Failed to upgrade legacy queries Datasource xxxxxxx w ...