您现在的位置是:首页 > Javascript
当前栏目
JS之DOM对象常用知识点整理
2023-03-14 22:54:36 时间
JS之DOM对象常用知识点整理
DOM树的介绍
获取元素对象的四种方式
通过元素ID获取对应元素对象—getElementByid();
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
</head>
<body>
<input type="text" id="001"/>
<script>
var t1=document.getElementById("001");
alert(t1);
</script>
</body>
</html>
注意: 可以通过ID获取对应元素的对象,如果找不到返回null
通过name属性获取所有需要的对象—getElementsByname()
注意:这里返回的是一个元素节点对象的数组,如果找不到对应的对象,返回一个空数组
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
</head>
<body>
<input type="checkbox" name="hobby" value="read"/>
<input type="checkbox" name="hobby" value="gym"/>
<input type="checkbox" name="hobby" value="paly"/>
<script>
var arr=document.getElementsByName("hobby");
alert(arr.length);
</script>
</body>
</html>
通过标签名获取符合要求的所有元素
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
</head>
<body>
<ul>
<li>java</li>
<li>c++</li>
<li>c</li>
<li>html</li>
</ul>
<script>
var arr=document.getElementsByTagName("li");
alert(arr.length);
</script>
</body>
</html>
通过class属性获取所有符合要求的元素
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
</head>
<body>
<input type="radio" name="sex" value="man" class="h1">
<input type="radio" name="sex" value="woman" class="h1">
<script>
var arr=document.getElementsByClassName("h1");
alert(arr.length);
</script>
</body>
</html>
获取节点对象的注意事项
获取某个/某些元素节点对象,必须保证元素节点对象被先加载到内存中
反例演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
</head>
<script>
var arr=document.getElementsByClassName("h1");
alert(arr.length);
</script>
<body>
<input type="radio" name="sex" value="man" class="h1">
<input type="radio" name="sex" value="woman" class="h1">
</body>
</html>
元素对象常见属性
value属性
修改元素的值
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
</head>
<body>
<input type="text" id="t1" value="你好">;
<script>
var t1=document.getElementById("t1");
//修改value属性值
t1.value="大忽悠";
</script>
</body>
</html>
className属性
修改元素的样式
注意:class在JS中是关键字,因此使用className,绕开
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
<style>
.ys1{
color: red;
}
.ys2{
color: blue;
}
</style>
</head>
<body>
<span id="s1" class="ys1">我是一个大忽悠</span>
<script>
var s1=document.getElementById("s1");
s1.className="ys2";
</script>
</body>
</html>
checked属性
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
</head>
<body>
<input type="checkbox" id="hobby"/>
<script>
var c=document.getElementById("hobby");
alert(c.checked);
//让复选框默认选中
c.checked=true;
</script>
</body>
</html>
innerHtml属性
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大忽悠个人主页</title>
</head>
<body>
<span id="s1">你叫什么名字</span>
<script>
//获取span标签的内容体
var s1=document.getElementById("s1");
alert(s1.innerHTML);
//设置span标签的内容体
s1.innerHTML="我叫大忽悠";
//向span标签,追加内容体信息
s1.innerHTML+="我是傻逼";
</script>
</body>
</html>
注意:字符串后面追加内容,要用+=
相关文章
- Python HTML操作(HTMLParser)
- java gui组件_JAVA GUI界面组件学习
- http rest JAVA_JAVA发HTTP请求 - RestTemplate 案例
- python unittest生成html报告_python+unittest框架生成HTML测试报告
- 快速构建一个用本地网络发送和接收消息的APP
- 2021年,排名前 15 的 Vue 后台管理模板
- Spring Boot一键换肤,so easy!
- 美国或将所有设计14nm以下中国芯片公司纳入出口管制?
- React的并发模式该如何使用?
- 如何在React中处理组件交互?
- 请查收 2020 全球 JS 现状调查报告
- Levels.fyi发布2020年度程序员收入报告
- 想要复制图像?Clipboard API 了解一下
- 2020全球CSS报告新鲜出炉,前端从业者平均年薪35w
- 10个对Web开发人员有用的HTML文件上传技巧
- AWS Firewall Manager – 您的 Web 应用程序资产的集中管理解决方案
- 为最终在 Twitch 上推出 AWS Quest 做准备
- React 消息订阅与发布机制
- Vue之设置视频为背景图
- 如何实现前端新手引导功能?