首页 > 代码库 > Dom选择器的使用
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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/add1"> <hr> 密码:<input type="text" value="http://www.mamicode.com/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="http://www.mamicode.com/add1" onclick="add()"> <hr> 密码:<input type="text" value="http://www.mamicode.com/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选择器的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。