JS之DOM对象常用知识点整理
Posted 大忽悠爱忽悠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS之DOM对象常用知识点整理相关的知识，希望对你有一定的参考价值。
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>
注意:字符串后面追加内容，要用+=
以上是关于JS之DOM对象常用知识点整理的主要内容，如果未能解决你的问题，请参考以下文章