JavaScript中的DOM操作
- 日期：2022-01-17
- 浏览：969次
1.JavaScript-DOM操作
DOM（Document Object Module）针对页面中的节点进行动态操作
1.1 元素获取
js中提供了四种根据基础选择器而来的获取元素的方式
获取方式
描述
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsName()
根据id获取元素（唯一）
根据class名获取元素（一组）
根据标签名获取元素（一组）
根据name属性值获取元素（一组）
<input type="text" id="uname" name="hobby">
<input type="text" name="hobby">
<button type="button">获取元素</button>
//根据标签名获取元素
let btns = document.getElementsByTagName("button");
console.log(btns);
//根据类名获取
let eles = document.getElementsByClassName("money");
console.log(eles);
//根据id获取
let idInput = document.getElementById("uname");
console.log(idInput);
//根据name属性值获取
let hobbys = document.getElementsByName("hobby");
console.log(hobbys);
1.2 获取及修改元素内容
HTML中的元素分单标签与双标签，单标签以表单中的input为主
双标签获取方式
let btn = document.getElementsByTagName("button")[0];
let divNode = document.getElementsByTagName("div")[0];
//对象.innerHTML
console.log(btn.innerHTML);
console.log(divNode.innerHTML);
//对象.innerHTML=值
divNode.innerHTML = "改变后的值";
console.log("————");
//对象.outerHTML
console.log(divNode.outerHTML);
outerHTML和innerHTML的区别
innerHTML获取双标签中的内容（不论是该内容时标签还是文本）
outerHTML获取双标签中的内容（不论是该内容时标签还是文本），同时包含了自身的标签
单标签获取方式
//对象.value 这个只能用于获取单标签的元素值
console.log(hobbys[0].value,hobbys[0].id,hobbys[0].name);
//对象.value=值
hobbys[1].value = "嘿嘿";
console.log(hobbys[1].value);
1.3 获取及修改元素的样式
<div style="color: darkgoldenrod;font-size: 14px;">
注意样式本身也是元素中的一个属性中的值
</div>
//1.先获取到对象
let divNode = document.getElementsByTagName("div")[0];
//2.对象.属性
console.log("颜色值：",divNode.style.color);
console.log("字体大小：",divNode.style.fontSize);
//3.对象.style.属性=值
divNode.style.fontSize = "20px";
divNode.style.color = "white";
divNode.style.backgroundColor = "rgb(155,255,255)";
案例：实现简易轮播图效果
<style type="text/css">
div{
width: 500px;
height: 200px;
margin: 100px auto;
background-color: #6495ED;
}
</style>
<div>
<img src="./1.gif" alt="">
</div>
let pic = document.getElementsByTagName("img")[0];
let index = 1;
function changePicture(){
if(index == 3){
index = 1;
}
pic.src = "./"+(index++)+".gif";
setTimeout(changePicture,1000);
}
changePicture();
案例2：使用第三方框架Swiper实现轮播效果
Swiper中文API文档
<div>
<div>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
<div></div>
<!– 如果需要导航按钮 –>
<div></div>
<div></div>
</div>
<!–引入第三方js–>
<script src="./js/swiper-bundle.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 切换选项
loop: true, // 循环模式选项
speed: 1000,
autoplay: {
delay:2000
},
effect:"flip",
pagination: {
el: '.swiper-pagination',
},
//如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
</script>
1.4 事件绑定
事件即用户对浏览器中的HTML元素进行了某些操作，浏览器根据用户的操作给出响应的整个过程中的触发形式
常见事件
事件名
描述
onclick
单击事件
onchange
onsubmit
onload
变化事件
表单提交事件
页面加载事件
onclick单击事件
<input type="text">
<input type="text">
<button onclick="sumMethod()">计算</button>
<span>结果为：<strong></strong></span>
/*
操作流程
1.在输入框中输入要计算的数字
2.点击计算按钮进行计算
a.先获取到两个输入框中的数字
b.那两个结果进行运算
3.将计算后的结果在strong标签显示出来
将结果进行赋值操作
*/
//1.先获取到页面中需要用到的元素
let inNodes = document.getElementsByTagName('input');
let x = inNodes[0];
let y = inNodes[1];
let btn = document.getElementsByTagName("button")[0];
let strongNode = document.getElementsByTagName("strong")[0];
//2.定义任务
function sumMethod(){
//3.获取到输入框中的值进行加法运算
let result = parseFloat(x.value) + parseFloat(y.value);
//4.将结果赋值到strong标签上
strongNode.innerHTML = result;
}
onchange变化事件
<select name="pro" id="" onchange="changeMethod(this)">
<option value="hunan">湖南省</option>
<option value="shandong">山东省</option>
<option value="henan">河南省</option>
</select>
/*
select标签中提供了一个属性-selectedIndex(获取当前选中的下拉框中的下标-0)
*/
function changeMethod(obj){
console.log("—",obj.selectedIndex,obj.value);
}
onsubmit表单提交事件
<form action="" onsubmit="return check()">
用户名：<input type="text" name="uname">
密码：<input type="password" name="pwd">
<input type="submit" value="登录">
</form>
/*
onsubmit事件需要一个boolean类型的返回值作为表单是否提交的依据
*/
let inNodes = document.getElementsByTagName("input");
function check(){
let unameVal = inNodes[0].value;
if(unameVal==""){
return false;
}
return true;
}
onload页面加载事件
//onload函数是在页面加载完毕后才会执行其中的代码
window.onload = function(){
let btnNodes = document.getElementsByTagName("button");
btnNodes[0].onclick = show;
btnNodes[1].onclick = show;
function show(){
alert("–");
}
}
案例：实现购物车选择效果
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
}
#parent{
width: 1200px;
margin: 10px auto;
}
ul{
list-style: none;
}
ul li{
height: 70px;
padding: 5px;
border: 1px solid #b0b0b0;
}
ul li div{
float: left;
margin-right: 10px;
}
ul li div.pic,ul li div.check{
line-height: 55px;
}
ul li div.pic{
margin-top: 10px;
}
ul li div span{
color: red;
}
ul li div .desc{
font-size: 12px;
color: #B0B0B0;
}
.clearfix:after{
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
<div id="parent">
全选<input type="checkbox" id="checkAll" onclick="stateChange(this)" />
<ul>
<li>
<div>
<input type="checkbox" onclick="checkState()">
</div>
<div>
<img src="./3.jpg" width="50px" height="50px" alt="">
</div>
<div>
<h4>小蜜蜂扩音器</h4>
<p><span>￥9.9</span></p>
<p>小蜜蜂扩音器，只要9.9，买不了吃亏买不了上当</p>
</div>
</li>
<li>
<div>
<input type="checkbox" onclick="checkState()">
</div>
<div>
<img src="./3.jpg" width="50px" height="50px" alt="">
</div>
<div>
<h4>星巴克马克杯</h4>
<p><span>￥199.9</span></p>
<p>星巴克马克杯，只要199.9，你值得拥有</p>
</div>
</li>
<li>
<div>
<input type="checkbox" onclick="checkState()">
</div>
<div>
<img src="./3.jpg" width="50px" height="50px" alt="">
</div>
<div>
<h4>金属哑铃全套</h4>
<p><span>￥109.9</span></p>
<p>金属哑铃全套，只要109.9，渣男的道路近在咫尺</p>
</div>
</li>
</ul>
</div>
//每一个商品的选中状态要和全选按钮的选中状态保持一致，从而达到全选的效果
let checks = document.getElementsByTagName("input");
//全选全不选函数
function stateChange(obj){
//1.先获取到全选按钮的选中状态
let state = obj.checked;
//2.将所有的商品的选中状态和全选的选中状态保持一致
for(let i=1;i<checks.length;i++){
checks[i].checked = state;
}
}
//反选关联函数
function checkState(){
//当商品的复选框中有任意一个或多个处于未选中的状态，那全选复选框的状态就为未选中
for(let i=1;i<checks.length;i++){
//判断是否有未选中的复选框
if(!checks[i].checked){
//将全选框状态变为未选中状态
checks[0].checked = false;
return;
}
}
checks[0].checked = true;
}
案例2：随机点名效果
*{
margin: 0;
padding: 0;
}
h3{
height: 45px;
color: white;
text-align: center;
line-height: 45px;
background-color: #6495ED;
box-shadow: 3px 3px 5px #007AFF;
}
div{
width: 500px;
height: 400px;
margin: 100px auto;
box-shadow: 3px 3px 5px #ccc;
}
div h4{
height: 50px;
padding: 10px;
text-align: center;
}
div p{
width: 70%;
height: 45px;
line-height: 45px;
text-align: center;
margin: 40px auto;
}
div p input{
display: block;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
}
div p button{
width: 120px;
height: 35px;
color: white;
border: none;
outline: none;
background-color: #008B8B;
}
div p input,div p button{
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
<h3>TongBaiShan's name-list</h3>
<div>
<h4>name-list</h4>
<p><input type="text"></p>
<p><button onclick="show()">Start</button></p>
</div>
//获取元素
let nameNode = document.getElementsByTagName("input")[0];
let btnNode = document.getElementsByTagName("button")[0];
let nameArray = ['石坤坤',"何沛文","杨晨玙","王晨阳","张小豪","李鑫","丁铭扬","谢一飞"];
//定时器变量
let timer = null;
//设置默认值
nameNode.value = nameArray[0];
//显示姓名
function show(){
if(timer == null){
btnNode.innerHTML = "Stop";
btnNode.style.color = "red";
start();
return;
}
btnNode.style.color = "white";
btnNode.innerHTML = "Start";
stop();
}
//开启点名器
function start(){
//生成随机下标
let index = Math.floor(Math.random()*nameArray.length);
//根据下标拿到对应的名字
let name = nameArray[index];
//将名字在页面显示出来
nameNode.value = name;
//重复上述动作
timer = setTimeout(start,15);
}
//关闭定时器
function stop(){
clearTimeout(timer);
timer = null;
}
1.5 元素动态增删
//获取元素
let btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
//添加元素 document.createElement("标签名");
let aNode = document.createElement("a");
//给创建好的元素添加内容及相关的属性
aNode.innerHTML = "百度新闻";
aNode.href = "http://news.baidu.com";
//将创建好的元素放到指定的页面位置中 appendChild()
let divNode = document.getElementsByTagName("div")[0];
divNode.appendChild(aNode);
}
案例：表格动态增删
p{
text-align: center;
}
button{
width: 120px;
}
td{
height: 35px;
text-align: center;
}
span{
color: white;
font-size: 14px;
cursor: pointer;
padding: 5px;
margin-left: 15px;
}
span:nth-of-type(1){
background-color: darkcyan;
}
span:nth-of-type(2){
background-color: darkorange;
}
span:hover{
opacity: 0.7;
}
<p>
<button>create Element</button>
<button>delete Element</button>
</p>
<table id="test" border="1" cellpadding="0" cellspacing="0" width="50%">
<thead>
<tr>
<th>用户编号</th>
<th>用户姓名</th>
<th>联系方式</th>
<th>操作方式</th>
</tr>
</thead>
</table>
let tabNode = document.getElementsByTagName("table")[0];
//找到两个按钮绑定事件
let btns = document.getElementsByTagName("button");
//添加元素
let index = 10000;
btns[0].onclick = function(){
//创建行元素及列元素
let trNode = document.createElement("tr");
let tdNode01 = document.createElement("td");
let tdNode02 = document.createElement("td");
let tdNode03 = document.createElement("td");
let tdNode04 = document.createElement("td");
//给列元素赋值
tdNode01.innerHTML = ++index;
tdNode02.innerHTML = '蔡文姬';
tdNode03.innerHTML = "120";
//创建操作栏中的标签
let spanNode = document.createElement("span");
let spanNode02 = document.createElement("span");
spanNode.innerHTML = "编辑";
spanNode02.innerHTML = "删除";
//将操作用的两个标签添加到操作栏中
tdNode04.appendChild(spanNode);
tdNode04.appendChild(spanNode02);
//将列添加到行中
trNode.appendChild(tdNode01);
trNode.appendChild(tdNode02);
trNode.appendChild(tdNode03);
trNode.appendChild(tdNode04);
//将行元素添加到表格中
tabNode.appendChild(trNode);
}
//删除元素
btns[1].onclick = function(){
//删除 remove() removeChild()
//找到全部的tr节点
let trNodes = document.getElementsByTagName("tr");
//找到最后一个tr节点
let lastTrNode = trNodes[trNodes.length-1];
//lastTrNode.remove();
tabNode.removeChild(lastTrNode);
}
