JavaScript学习笔记高阶篇-DOM编程（四）
10 DOM编程
- 简介
DOM：（Document Object Model）文档对象模型
浏览器在解析HTML文件时，会将每一个标签解析为一个DOM对象，最终，一个HTML文件就被解析为了一颗DOM树
浏览器根据DOM树的结构，渲染页面的效果，所谓的DOM编程，就是通过JS操作DOM从而修改页面
- DOM编程的组成
- 获取页面中元素的DOM对象
- 操作DOM，修改页面
10.1 获取DOM对象
- 语法
//只返回获取的第一个元素的DOM对象
document.querySelector("选择器");
//返回获取的所有元素DOM对象，是一个数组
document.querySelectorAll("选择器");
选择器：用来选择匹配标签
10.2 选择器
1.基本选择器
- id选择器
- 语法：#id属性值
<p id="i1">p1</p>
<p id="i2">p2</p>
<input type="button" onclick="idSel()" value="单击"/>
<script type="text/javascript">
function idSel(){
var p1Dom = document.querySelector("#i1");
console.log(p1Dom);
var p2Dom = document.querySelector("#i2");
console.log(p2Dom);
}
</script>
- 类选择器
- 语法：.class属性值
<p class="c1">p1</p>
<p class="c1">p2</p>
<p class="c2">p3</p>
<p class="c1 c2">p4</p>
<script type="text/javascript">
var c1Doms = document.querySelectorAll(".c1");
for(var i = 0; i < c1Doms.length; i++){
console.log(c1Doms[i]);
}
</script>
- 标签选择器
- 语法：直接用标签名
<p>p1</p>
<h1>h1_1</h1>
<p>p2</p>
<h1>h1_2</h1>
<script type="text/javascript">
var h1Doms = document.querySelectorAll("h1");
for(var i = 0; i<h1Doms.length; i++){
console.log(h1Doms[i]);
}
</script>
- 多路选择器
- 语法：选择器1，选择器2，…
<p id="i1">p1</p>
<h1>h1_1</h1>
<p class="c1">p2</p>
<h1 class="c2">h1_2</h1>
<script type="text/javascript">
var doms = document.querySelectorAll("#i1,h1,.c1");
for(var i = 0; i <doms.length; i++){
console.log(doms[i]);
}
</script>
2.层次选择器
- 后代选择器：获得父标签所有后代
- 语法：父选择器 子选择器
<p id="p1">这是个段落<span>这是p中的span</span></p>
<span>这是p的兄弟span</span>
<script type="text/javascript">
var spans = document.querySelectorAll("#p1 span");
for(var i = 0; i <spans.length; i++){
console.log(spans[i]);
}
</script>
- 直接子代选择器
- 语法：父选择器>子选择器
<p>这是个段落<span>这是p中的span</span></p>
<span>这是p的兄弟span</span>
<script type="text/javascript">
var spans = document.querySelectorAll("body>span");
for(var i = 0; i <spans.length; i++){
console.log(spans[i]);
}
</script>
- 所有兄弟选择器
- 语法：哥哥选择器~弟弟选择器
<ul>
<li id="i1">桃子</li>
<li>李子</li>
<li>梨子</li>
</ul>
<script type="text/javascript">
var lis = document.querySelectorAll("#i1~li");
for(var i = 0; i <lis.length; i++){
console.log(lis[i]);
}
</script>
- 紧邻兄弟选择器
- 语法：哥哥选择器+弟弟选择器
<ul>
<li id="i1">桃子</li>
<li>李子</li>
<li>梨子</li>
</ul>
<script type="text/javascript">
var lis = document.querySelectorAll("#i1+li");
for(var i = 0; i <lis.length; i++){
console.log(lis[i]);
}
</script>
3.过滤选择器
过滤选择器：对基本或者层次选择器选择到一组标签进行再次过滤，一般不单独使用。
属性过滤
- 语法：
[属性名=值] 过滤属性为指定值的标签
[属性名$=后缀] 过滤属性为指定后缀的标签
[属性名^=前缀] 过滤属性以指定前缀开头的标签
[属性名*=值] 过滤属性值包含特定内容的标签
[属性名] 过滤显式定义出某个属性的标签
- 示例：
<form action="">
用户名: <input type="text" name="username"> <br>
密码：<input type="password" name="pwd"> <br>
验证码:<input name="validateCode"><br>
<input type="submit" value="登录"/>
</form>
<script type="text/javascript">
var inputs1 = document.querySelectorAll("input[type='text']");
for(var i = 0; i <inputs1.length; i++){
console.log(inputs1[i]);
}
console.log("------------------");
var inputs2 = document.querySelectorAll("input[name$='d']");
for(var i = 0; i < inputs2.length; i++){
console.log(inputs2[i]);
}
console.log("--------------------");
var inputs3 = document.querySelectorAll("input[name^='u']");
for(var i = 0; i <inputs3.length; i++){
console.log(inputs3[i]);
}
console.log("-----------");
var input4 = document.querySelectorAll("input[type*='t']");
for(var i =0; i <input4.length; i++){
console.log(input4[i]);
}
console.log("-------------");
var input5 = document.querySelectorAll("input[type]");
for(var i = 0; i < input5.length; i++){
console.log(input5[i]);
}
</script>
子元素过滤
- 语法：
:nth-child(n) 过滤自个是家里排行第n（从1开始）的元素
:first-child 过滤自个是家里排行老大的元素
:last-child 过滤自个是家里排行老幺的元素
- 示例：
<table border="1" align="center">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xiaohong</td>
<td>
<a href="" class="delete">删除</a>
<a href="">更新</a>
</td>
</tr>
<tr>
<td>2</td>
<td>xiaohei</td>
<td>
<a href="" class="delete">删除</a>
<a href="">更新</a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//获取所有删除超链接
var deletes = document.querySelectorAll("td>a:nth-child(1)");
for(var i = 0; i < deletes.length; i++){
console.log(deletes[i]);
}
console.log("--------------");
var deletes2 = document.querySelectorAll("td>a:first-child");
for(var i = 0; i < deletes2.length;i++){
console.log(deletes2[i]);
}
console.log("--------------");
var updates = document.querySelectorAll("td>a:last-child");
for(var i =0; i < updates.length; i++){
console.log(updates[i]);
}
</script>
10.3 访问标签属性
- 语法：dom对象.属性
- 示例：获取属性+修改属性
<form action="">
data: <input type="text" name="data">
<input type="button" value="单击" onclick="handleClick()">
<input type="button" value="修改" onclick="handleClick2()">
</form>
<script type="text/javascript">
function handleClick(){
//获取到 文本输入框的name和value属性值
//1 获取dom对象
var dataDom = document.querySelector("input[name='data']");
//2 访问属性
console.log(dataDom.name);
console.log(dataDom.value);
}
function handleClick2(){
//修改 文本输入框的value属性
//1 获取dom对象
var dataDom = document.querySelector("input[name='data']");
//2 访问属性
dataDom.value = 'xiaohei';
}
</script>
10.4 获取标签内部内容
- 语法：dom对象.innerHTML
- 示例：
<p>这是个段落<span>这是p中的span</span></p>
<input type="button" value="单击" onclick="handleClick()">
<input type="button" value="修改" onclick="handleClick2()">
<script type="text/javascript">
function handleClick(){
//1 获取dom对象
var pDom = document.querySelector("p");
//2 操作内部内容
console.log(pDom.innerHTML);
}
function handleClick2(){
//1 获取dom对象
var pDom = document.querySelector("p");
//2 操作内部内容
pDom.innerHTML = "百度一下";
}
</script>
总结
操作DOM：修改DOM标签的属性和内部内容。
- 修改属性
dom对象.属性 = 新值;- 修改内部内容
dom对象.innerHTML = 新的内容;