一、关于DOM
1.DOM说明
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
2.DOM选择器说明
document.getElementById(‘id‘); //id 选择器
document.getElementsByName(‘name‘); //name选择器
document.getElementsByTagName(‘tagname‘); //标签选择器
document.getElementsByClassName(‘cname‘); //class选择器
3.实例说明
3.1.原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>about dom</title>
<style>
.ckl {
font-weight: 800;
color: mediumvioletred;
}
</style>
</head>
<body>
<div>
<div id="n1" style="color: deepskyblue">wahaha</div>
<a>This is a ponit</a>
</div>
<u1>
<li>We from</li>
<li>the same</li>
<li>world </li>
<li>but we</li>
<li>never...</li>
</u1>
<div>
<div class="ckl">spring</div>
<div class="ckl">summer</div>
<div class="ckl">autum</div>
</div>
</body>
</html>
查看页面：
3.2.通过查找id来修改内容
<script>
var nid = document.getElementById(‘n1‘)
console.log(nid.innerText);
id.innerText = ‘kangshuaifu‘;
console.log(nid.innerText);
</script>
查看结果：
3.3.通过标签来修改内容
var dname = document.getElementsByTagName(‘li‘);
for(var i in dname){
var item = dname[i];
item.innerText = i;
}
运行结果：
3.4.通过class来查找修改内容
var cname = document.getElementsByClassName(‘ckl‘);
for(var j in cname){
var jtm = cname[j];
jtm.innerText = j;
}
查看结果：
3.5.通过name来查找内容
var uname = document.getElementsByName(‘uname‘)[0];
var pwd = document.getElementsByName(‘pwd‘)[0];
console.log(uname.value,pwd.value);
查看结果：
时间： 2024-10-11 22:14:09