前言：目前正在学习JS的一些基础内容，会将学习到的持续分享到博客，欢迎萌新观看
一、节点关系
1.父节点 parentElement
// 获取到父节点
var parent = document.getElementById("parent");2.所有子节点 children
// 获取到所有的子节点
console.log(parent.children);3.第一个子节点 firstElementChild
// 第一个子节点
var first = parent.firstElementChild;4.最后个子节点 lastElementChild
// 最后一个子节点
var last = parent.lastElementChild;5.上一个兄弟 previousElementSibling
// me的上一个兄弟节点
var pre = me.previousElementSibling;6.下一个兄弟 nextElementSibling
// me的下一个兄弟节点
var next = me.nextElementSibling;二、属性操作
1.getAttribute 获取属性
2.setAttribute 设置属性
3.removeAttribute 移除属性
<body>
<h1>属性修改</h1>
<img src="images/pic1.png" alt="一张好图"><br/>
<button onclick="changeImg()">修改图片</button>
<script>
function changeImg(){
// 获取图片
var img = document.querySelector("img");
// 获取图片的src属性
console.log(img.getAttribute("src"))
// 修改图片的src属性
img.setAttribute("src",'./images/pic2.png');
// 删除alt属性
img.removeAttribute("alt");
}
</script>
</body>三、节点信息
js的DOM核心编程 ，每个元素都是一个节点，节点有不同类型有不同信息
1.nodeName节点的名称
2.nodeType节点的类型
3.nodeValue节点的值
<body>
<h1>属性修改</h1>
<p><strong>HI</strong>我是文本内容ABC</p>
<script>
var p = document.querySelector("p");
console.log("nodeName",p.nodeName); //大写P
console.log("nodeType",p.nodeType); //1 代表元素
console.log("nodeValue:"+p.nodeValue); // 元素节点nodeValue为None
var text = p.firstChild; //p的第一个子元素是文本节点（文本也是节点）
console.log("nodeName",text.nodeName);
console.log("nodeType",text.nodeType); // 3 代表文本节点
console.log("nodeValue",text.nodeValue);// 文本节点是文本
</script>
</body>四、节点操作
- 创建节点document.createElement(tag)
- 删除节点：elem.remove()
- elem.parentElment.removeChild(elem)
- 复制节点 ,不带子节点var elem2 = elem.cloneNode(false)
- 复制节点，带子节点var elem3 = elem.cloneNode(true)
- 插入节点parent.appendChild(elem) 将elem插入到parent最后面
- 插入节点parent.insertBefore(新的节点，相关节点)把新的节点插入到 相关节点的前面
- 替换节点parent.replaceChild(新的节点，被替换的节点)
<body>
<h1>节点的创建与插入</h1>
<button type="button" onclick="createImg()">创建并插入</button>
<button type="button" onclick="copyImg()">复制图片</button>
<button type="button" onclick="delImg()">删除</button>
<button type="button" onclick="insertImg()">指定位置</button>
<br/>
<p id="myp">咱们是一个p标签</p>
<img src="images/pic1.png" id="pic1">
<script>
function insertImg(){
// 创建图片
var img = document.createElement("img");
// 指定图片的src
img.setAttribute("src",'images/pic3.png');
// 选中要插入的相关节点
var myp = document.getElementById("myp");
// 执行插入
document.body.insertBefore(img,myp);
}
function delImg(){
// 找到要删除的图片(last-of-type 选中最后一张图片)
var img = document.querySelector("img:last-of-type");
// 执行删除
// img.remove();//自己删除自己
// 用父节点来删除
img.parentElement.removeChild(img);
}
function copyImg(){
// 01 选中被复制的图片
var pic1 = document.getElementById("pic1");
// 02 复制
var img = pic1.cloneNode(false); //true包含子节点，false只是当前节点
// 03 插入到body中(document.body 直接获取body元素节点)
document.body.appendChild(img);
}
function createImg(){
// 通过js创建一张图片
var img = document.createElement("img");
// 指定图片的src值
img.setAttribute("src",'images/pic2.png');
// 插入到body标签
document.body.appendChild(img);
}
</script>
</body>五.制作一个留言板
<body>
<h1>校园留言表白墙</h1>
<p>用户名：<input type="text" id="uname" /></p>
<p>留言内容:<textarea id="msg"></textarea></p>
<p><button type="button" onclick="send()">发表留言</button></p>
<!--存放留言内容 -->
<div class="msgBox">
<div class="item">
<p>曾木木 2022/5/20 10:52</p>
<div>我认为你的灵魂很有趣，能加个微信不？</div>
<hr/>
</div>
</div>
<script>
function send(){
// 获取用户名
var uname = document.getElementById("uname");
// 获取时间
var date = new Date().toLocaleString();//转换为本地字符串
// 获取留言内容
var msg = document.getElementById("msg");
/* if(!msg.value){
alert("留言不能为空")
return;
} */
// 获取msgBox
var msgBox = document.querySelector(".msgBox");
// 创建新的item
var item = document.createElement("div");
item.className = "item";//设置类名
// 拼接字符串HTML
var str = `
<p>${uname.value} ${date}</p>
<div>${msg.value}</div>
<hr/>
`;
// 设置item的html内容
item.innerHTML = str;
// msgBox插入item
// msgBox.appendChild(item); //插入到msgBox后面
msgBox.insertBefore(item,msgBox.firstElementChild)
// 插入到msgBox第一个子节点前面
// 清空用户名，清空留言内容
msg.value = '';
}
</script>
</body>六.表格的操作
- 创建行row = table.insertRow(index)
- 创建列col = row.insertCell(index)
- 设置列的内容col.innerText="xxx"
- 选择第一行table.firstElementChild.fristElementChild
<body>
<table border="1" cellspacing="" cellpadding="">
<tr>
<td>书名</td> <td>价格</td> <td>操作</td>
</tr>
<td>精通js</td> <td>16.8</td> <td><button>删除</button></td>
</tr>
</tr>
<td>60个瞬间</td> <td>32.2</td> <td><button>删除</button></td>
</tr>
</table>
<button type="button" onclick="addRow()">增加一行</button>
<button type="button" onclick="delRow()">删除第一行</button>
<button type="button" onclick="changeTitle()">修改标题</button>
<script>
function changeTitle(){
// var list = document.getElementsByTagName获取的是一个类似列表
// [table,table] 第一个table
// list[0]
var table = document.getElementsByTagName("table")[0];
// table 默认会添加一个tbody标签
// table第一个子节点tbody tbody第一个子节点是tr
var row = table.firstElementChild.firstElementChild;
row.style.backgroundColor="#f30";
console.log(row);
}
function delRow(){
// 通过标签名table获取
var table = document.getElementsByTagName("table")[0];
// 删除第0行
table.deleteRow(1);
}
function addRow(){
// 通过标签名table获取
var table = document.getElementsByTagName("table")[0];
// 插入行
var row = table.insertRow(2);
// 一行插入2列表
var td1 = row.insertCell(0);
var td2 = row.insertCell(1);
var td3 = row.insertCell(2);
// 设置列的内容
td1.innerText = "精通Vue3.0";
td2.innerText = "20.00";
td3.innerHTML = '<button>删除</button>';
}
</script>
</body>七.事件的注册
1.DOM0 在html标签中<h1 οnclick="callMe()">
2.DOM1 实现js与html分离btn.οnclick=callMe;btn.onclick = function(){}
(多次注册，只会执行最后一个)
3.DOM2 可以添加多个，也可以移除btn.addEventListener(“click”,callMe)；
btn.addEventListener("click",function(){})
4.移除全部clickbtn.removeEventListenter("click")
移除一个btn.removeEventListenter("click",callMe)
<body>
<h1 onclick="callMe()">事件的监听</h1>
<button id="btn">点我</button>
<button id="btn2">随意</button>
<script>
// js响应事件由三种监听方式
// 01 事件响应写在html标签属性里面（简单）
function callMe(){
alert("我被点到了");
}
// 02 在js对象的属性中监听（和html分离）
var btn = document.getElementById("btn");
// btn.onclick = callMe; //不要圆括号
btn.onclick =function(){
alert("要线下了，我很开心");
}
// 03 通过addEventListener 注册 (可以注册多个)
var btn2 = document.getElementById("btn2");
// click 事件名称：mouseover，mouseout load
// callMe 事件的响应函数 还可以写个匿名函数
btn2.addEventListener("click",callMe)
btn2.addEventListener("click",function(){
alert("开心要见到你们了✨🎉😍");
})
// add添加；Event事件；Listenter监听器
// 添加事件监听器
</script>
</body>八.购物车效果
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th><input type="checkbox" id="all" onchange="checkAll()" /></th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>键盘</td>
<td>500</td>
<td>
<button type="button" onclick="minus(this)" >-</button>
<input type="text" value="1" />
<button type="button" onclick="add(this)" >+</button>
</td>
<td>500</td>
<td><button type="button" onclick="delRow(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>鼠标</td>
<td>100</td>
<td>
<button type="button" onclick="minus(this)" >-</button>
<input type="text" value="1" />
<button type="button" onclick="add(this)" >+</button>
</td>
<td>100</td>
<td><button type="button" onclick="delRow(this)">删除</button></td>
</tr>
<tr>
<td colspan="3" >总计</td>
<td colspan="3" id="sum"></td>
</tr>
</table>
<script>
// 每个非all的ckeckbox放变化时候，检查all是否改选择中了
// 非all的checkbox长度等于等于选中的非allcheckbox all被全选了
// 01 获取到所有的非allchekbox
var boxs = document.querySelectorAll("input[type=checkbox]:not(#all)");
// 选择到all checkbox
var all = document.getElementById("all");
boxs.forEach(function(item){
// 当个checkbox 值发生变化时候
item.onchange = function(){
// 获取到所有被选中的checkbox;
var sel = document.querySelectorAll("input[type=checkbox]:not(#all):checked");
// 当选中的ckeckbox的长度等于 所有boxs长度
if(sel.length==boxs.length){
all.checked = true;
}else{
all.checked = false;
}
// 当checkbox被改变是计算总价
calcTotal();
}
})
// 计算总价
function calcTotal(){
// 获取到sum
var sum = document.getElementById("sum");
var total = 0;//总价默认是0
// 获取选中的ckeckbox
var sel = document.querySelectorAll("input[type=checkbox]:not(#all):checked");
sel.forEach(function(item){ //item就是当前选中的checkbox
// 找到item对应的tr
var tr = item.parentElement.parentElement;
// 找到tr对应的小计
var sub = tr.querySelector("td:nth-of-type(5)");
// 累加到total
total+=sub.innerText*1;
})
// 在sum中显示出来
sum.innerText = total;
// 如果checked值true，找到当前行对应的小计
// 把小计的值累加 并放入sum
}
calcTotal(); //默认执行一次计算总价
// 全选的
function checkAll(){
// 选择到全选的ckeckbox
// var all = document.getElementById("all");
// 选择到所有的input 属性为checkbox 不是all00000
// var boxs = document.querySelectorAll("input[type=checkbox]:not(#all)");
// 遍历boxs 更新每个checked值为all的checked值
boxs.forEach(function(item){
item.checked = all.checked;
})
// 全选也计算总价
calcTotal();
}
// 减
function minus(btn){
// 通过btn找到input
var input = btn.nextElementSibling;
// 把iput的值*1转换为数字再-1
input.value = input.value*1-1;
// 获取价格btn父节点是td，td的上一个兄弟节点是price对应td 获取price的文本
var price = btn.parentElement.previousElementSibling.innerText*1;
// 获取小计对应的节点
var sub = btn.parentElement.nextElementSibling;
// 小计的文本 = input的值*价格
sub.innerText = input.value*price;
// 减的时候计算总价
calcTotal();
}
// 加
function add(btn){
// 通过btn 找到input标签(btn的上一个兄弟节点);
var input = btn.previousElementSibling;
// 把input的值加1再赋值个input
input.value = input.value*1+1;
// 获取价格btn父节点是td，td的上一个兄弟节点是price对应td 获取price的文本
var price = btn.parentElement.previousElementSibling.innerText*1;
// 获取小计对应的节点
var sub = btn.parentElement.nextElementSibling;
// 小计的文本 = input的值*价格
sub.innerText = input.value*price;
// 加的时候计算总价
calcTotal();
}
// 删除
function delRow(btn){
// console.log("this实参，btn是形参",btn);
// 通过btn找到 tr，删除tr;parent父；Element元素节点
var tr = btn.parentElement.parentElement;
tr.remove();
// 删除时候计算总价
calcTotal();
}
</script>
</body>
4031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
