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标签
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器