Dom选择器的使用
Posted 孔扎根
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Dom选择器的使用相关的知识，希望对你有一定的参考价值。
文档对象模型（Document Object Model，DOM）是一种用于html和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是javascript语言规范里的规定的核心内容。
注：一般说的JS让页面动起来泛指JavaScript和Dom
1、选择器--id属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
</div>
<div name="num">1</div>
<input type="button" value="add1">
<script type="text/javascript">
n_id = document.getElementById(‘kong‘);
// #显示此id标签<div id="kong">孔扎根的博文</div>
console.log(n_id);
// 显示id标签内的文本，孔扎根的博文
console.log(n_id.innerText);
// 将id=‘kong‘的文本内容改为我要删除它
n_id.innerText=‘我要删除它‘
</script>
</body>
</html>
选择器--标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
</div>
<div name="num">1</div>
<input type="button" value="add1">
<script type="text/javascript">
// 返回一个li标签列表
lis = document.getElementsByTagName(‘li‘);
//用此类型的for循环各个li标签
for(var i=0;i<lis.length;i++){
// 返回每个Lis标签中的文本内容
console.log(lis[i].innerText)
}
</script>
</body>
</html>
选择器---class属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
<div>不要</div>
<div>要</div>
</div>
<div class="top">
去掉分隔线吧
</div>
<div name="num">1</div>
<input type="button" value="add1">
<script type="text/javascript">
// 取到class=top的标签列表
cls = document.getElementsByClassName(‘top‘);
//循环class=top的标签列表
for(var i=0;i<cls.length;i++){
// 输出其中的文本内容
console.log(cls[i].innerText);
}
</script>
</body>
</html>
选择器--name属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
<div>不要</div>
<div>要</div>
</div>
<div class="top">
去掉分隔线吧
</div>
<div name="num">1</div>
<input type="button" value="add1">
<hr>
密码:<input type="text" value="123">
<script type="text/javascript">
// 取到name=num的标签列表
names = document.getElementsByName(‘num‘);
for(var i=0;i<names.length;i++){
console.log(names[i].innerText);
}
</script>
</body>
</html>
小例子：div标签中的数值自动加1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
<div>不要</div>
<div>要</div>
</div>
<div class="top">
去掉分隔线吧
</div>
<div id="num">1</div>
<input type="button" value="add1" onclick="add()">
<hr>
密码:<input type="text" value="123">
<script type="text/javascript">
function add(){
// 取到name=num的标签列表
names = document.getElementById(‘num‘);
v_name = names.innerText;
//反回的值是文本类型的 string
console.log(typeof(names.innerText));
v_name = parseInt(v_name);
v_name+=1;
// 实现id=num的值自动加1的效果
names.innerText=v_name;
}
</script>
</body>
</html>
2、内容
innerText
innerHTML
var obj = document.getElementById(‘nid‘)
obj.innerText # 获取文本内容
obj.innerText = "hello" # 设置文本内容
obj.innerHTML # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容
特殊的：
input系列
textarea标签
select标签
value属性操作用户输入和选择的值
以上是关于Dom选择器的使用的主要内容，如果未能解决你的问题，请参考以下文章
在给定 CSS 选择器的情况下查找 DOM 元素的 Vanilla JavaScript 函数
如何从 DOM 元素和选择器的混合中创建 JQuery 容器