<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-访问和修改</title>
<!-- dom document object model 文档对象模型
浏览器加载html页面时,会将html文档解析为一个树形结构,称为dom树
html文档和dom树是一一对应的
dom树被改变时,与之对应的html文档也会随之改变
当需要对html中的内容进行动态改变时,可以使用dom进行操作
dom提供了一组用来操作html文档的api,即提供一套属性、方法和事件
树上的每一个节点都是一个dom对象,树的顶层为document对象,表示整个文档-->
<script>
// 1 访问属性
function getProperty(){
let obj = document.getElementById("baidu");
//获取超链接的href属性值
console.log(obj.href);
//获取超链接的target属性值
console.log(obj.target);
//获取指定对象的内容
let objs = document.getElementById("username");
console.log(objs.value);
//获取指定对象的是否选中值,这里的checked返回的是false或ture,选中为true
let obj3 = document.getElementById("male");
console.log(obj3.checked);
//设置属性值
//将超链接百度的地址修改为别的,设置后刷新页面,点访问属性然后再点链接即可跳转到新的网址
obj.href = "https://blog.csdn.net/mo_sss";
//将跳转规则修改为当前页面跳转
obj.target = "_self";
//修改性别单选值的默认选项,将男性该位默认
obj3.checked = "true";
}
// 2 访问内容
function getContent(){
var obj = document.getElementById("d11");
//获取指定标签的内容
//获取标签内的所有内容,包括标签、空格和换行符等
console.log(obj.innerHTML);
//只获取标签内的文本内容
console.log(obj.innerText);
//设置内容
//设置标签内的内容,使用innerTEXT只能设置文本内容
obj.innerText = "同居长干里,两小无嫌猜。";
console.log(obj.innerText);
//设置标签内的内容,使用innerHTML可设置标签等特殊内容
obj.innerHTML = "<h2>朝如青丝暮成雪</h2>";
console.log(obj.innerHTML);
}
// 3 访问CSS
function getStyle(){
var obj = document.getElementById("d22");
//获取CSS样式的宽度
console.log(obj.style.width);
//获取CSS样式的字体大小,这里需要注意,样式的键带短杠的需要将短杠去掉将短杠后的首字母大写
console.log(obj.style.fontSize);
//获取CSS样式的字体
console.log(obj.style.fontFamily);
//获取CSS样式的左上角的半角像素
console.log(obj.style.borderTopLeftRadius);
//设置CSS样式的值
obj.style.background = "lightgreen";
// console.log(obj.style.borderTopLeftRadius);
//另一种访问CSS的方式,className方式,需要配合CSS样式标签<style>
var obj2 = document.getElementById("d33");
//获取标签的class值
console.log(obj2.className);
//设置样式标签中class属性的值,设置后,调用该函数后样式即可被修改,这里需要注意,对象没有标签中的class,需要使用className访问
obj2.className = "c11";
//获取CSS样式的宽度
console.log(obj2.style.width);
}
</script>
<style>
/* 原始的样式 */
.ccc{
background: brown;
font-size: 30px;
}
/* 修改后的样式 在函数中调用修改样式 */
.c11{
width: 150px;
height: 20px;
background: red;
font-size: 10px;
}
</style>
</head>
<body>
<!-- 1 访问属性 -->
<br><br><br>
<!-- 定义按钮,绑定事件,点击后触发事件,执行函数 -->
<input type="button" value="访问属性" onclick="getProperty()">
<br>
<!-- <hr> -->
<br>
<a href="https://www.baidu.com" target="_blank" id="baidu">baidu</a>
<br>
username: <input type="text" name="username" id="username">
sex: <input type="radio" name="sex" value="male" id="male">男
<input type="radio" name="sex" value="female" id="female" checked>女
<br><br><br>
<!-- 2 访问内容 -->
<br>
<hr>
<!-- 定义按钮,绑定事件,点击后触发事件,执行函数 -->
<input type="button" value="访问内容" onclick="getContent()">
<br><br><br>
<div id="d11">
高堂明镜悲白发
</div>
<!-- 3 访问css -->
<br>
<hr>
<!-- 定义按钮,绑定事件,点击后触发事件,执行函数 -->
<input type="button" value="访问CSS" onclick="getStyle()">
<br><br><br>
<div id="d22" style="width: 1000px; height: 40px; background: lightblue; font-size: 30px; font-family: 'Courier New', Courier, monospace;border-top-left-radius: 15px;">
却下水晶帘,玲珑望秋月。
</div>
<br><br><br>
<!-- 由于行内样式的优先级较高,无法演示引入样式,故新加一个div模块 -->
<div id="d33" class="ccc">
却下水晶帘,玲珑望秋月。
</div>
<!-- 访问操作:
访问属性
即获取或者设置dom对象的属性
dom对象的属性和html标签的属性几乎是一样的,一般情况下dom对象都会存在一个与对应html标签同名的属性
用法
dom对象.属性
访问内容
即获取或设置标签中的内容
两种方式
使用innerHTML
用法
dom对象.innerHTML
将内容解析为HTML
使用innerText
用法
dom对象.innerText
将内容作为纯文本
访问css
即获取或设置css样式
两种方式
使用style属性
用法
dom对象.style.样式属性
如果css属性中又短横线-,需要去掉短横线,然后将其后的单词首字母改成大写
使用className属性
用法
dom对象.className
-->
<!-- 添加操作:
方法---含义
document.createElement("tagName") 创建一个元素节点,即标签
document.createTextNode("textContent") 创建一个文本节点,即标签中的文本内容
node.appendChild(newNode) 将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode,refNode) 将一个新的节点newNode插入到node节点的子节点refNode之前
node.replaceChild(newNode,refNode) 用一个新的节点newNode替换原有的node节点中的子节点refNode
-->
<!-- 删除操作:
方法---含义
node.remove() 删除当前节点
node.removeChild(refNode) 删除当前节点中指定的子节点
-->
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript dom操作 访问和修改元素 示例代码
共4个文件
html:4个
需积分: 5 0 下载量 111 浏览量
2024-06-27
10:48:17
上传
评论
收藏 6KB ZIP 举报
温馨提示
JavaScript dom操作 访问和修改元素 示例代码 JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码
资源推荐
资源详情
资源评论
收起资源包目录
03dom_access_and_change.zip (4个子文件)
03style_access_and_change.html 3KB
04dom_acess.html 7KB
02content_access_and_change.html 1KB
01property_access_and_change.html 2KB
共 4 条
- 1
资源评论
寒山李白
- 粉丝: 2w+
- 资源: 72
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功