一、查看节点的关系(能获取到节点的父节点，兄弟节点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div id="parent">
<p>你好，我是p1</p>
<p id="me">你好我是p2</p>
<p>你好我是p3</p>
<h5>小小标题</h5>
</div>
<script>
// 获取到父节点
var parent = document.getElementById("parent");
// 获取到所有的子节点
console.log(parent.children);
// 第一个子节点
var first = parent.firstElementChild;
console.log("第一个子节点",first);
// 最后一个子节点
var last = parent.lastElementChild;
console.log("最后一个子节点",last);
// Children 子（复数）first 第一个 Element 元素 Child 子
// last 最后一个
// // 获取me节点
// var me = document.getElementById("me")
// console.log(me);
// // me得父节点
// console.log(me.parentElement);
// // me的上一个兄弟节点
// var pre = me.previousElementSibling;
// console.log(pre);
// // me的下一个兄弟节点
// var next = me.nextElementSibling;
// console.log(next);
// // parent 父 Element 元素 parentElement父元素
// // previous 之前，上一个 Element 元素 Sibling 兄弟
// // previousElementSibling上一个兄弟节点
// // next 下一个； Element 元素 Sibling 兄弟
// // nextElementSibling下一个兄弟节点
</script>
</body>
</html>二、步进器（购物车加减）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>步进器</h1>
<p>
<button type="button" onclick="minus(this)">
-
</button>
<input type="text" id="" value="1" />
<button type="button" onclick="add(this)">
+
</button>
</p>
<script type="text/javascript">
function minus(btn){
var input = btn.nextElementSibling;
input.value = input.value*1-1;
}
// 单击加让input值+1，单击减，让input值减一
function add(btn){
// 通过btn获取到input
var input = btn.previousElementSibling;
// 重新设置input的值为原来的input值*1转换为数字 + 1
input.value = input.value*1+1;
}
</script>
</body>
</html>三、属性修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>属性修改</h1>
<img src="添加图片" alt=""><br>
<button onclick="changeImg()">修改图片</button>
<script>
function changeImg(){
// 获取图片
var img = document.querySelector("img");
// 获取图片的src属性
console.log(img.getAttribute("src"));
// 修改图片的src属性
img.setAttribute("src",'需要修改的图片');
// 删除alt属性;
img.removeAttribute("alt");
}
</script>
</body>
</html>四、节点信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>属性修改</h1>
<p>我是文本</p>>
<script type="text/javascript">
var p = document.querySelector('p');
console.log("nodeName",p.nodeName);
console.log("nodeType",p.nodeName);//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>
</html>五、节点的创建跟插入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<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="inserImg()">指定位置</button>
<br/>
<p id="myp">我是一个p标签</p>
<img src="img/pic1.png" alt="" id="pic1">
<script>
function inserImg(){
// 创建图片
var img = document.createElement("img");
// 指定图片的src
img.setAttribute("src",'img/pic3.png');
// 选中要插入的相关图片，节点
var myp = document.getElementById("myp");
// 执行插入
document.body.insertBefore(img,myp);
}
function delImg(){
//找到要删除的图片
var img = document.querySelector("img:last-of-type");
//执行删除
//1自己删除自己
img.remove();
// 2父节点删除
img.parentElement.removeChild(img);
}
function copyImg(){
//1 选中被复制的图片
var pic1 = document.getElementById("pic1");
//2 复制
var img = pic1.cloneNode(false);//true 包含子节点，false只是当前节点
//3 插入到body里面
document.body.appendChild(img);
}
function createImg(){
//通过js创建一张图片
var img = document.createElement("img")
// 指定图片的src值
img.setAttribute("src",'img/pic2.png');
// 插入到body标签
document.body.appendChild(img);
}
</script>
</body>
</html>六、留言板（练习题）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>校园留言表白墙</h1>
<p>用户名：<input type="text" id="uname" value="" /></p>
<p>留言内容：<textarea id="msg"></textarea></p>
<p><button type="button" onclick="send()">发表留言</button></p>
<!-- 存放留言内容 -->
<div class="msgBox">
<div class="item">
<p>*** 2020/5/20 13：14</p>
<div>
你很棒
</div>
<hr />
</div>
</div>
<script>
function send() {
// 获取用户名
var uname = document.getElementById("uname");
//获取时间
var date = new Date().toLocaleString();//转换为本地字符串
// 获取留言内容
var msg = document.getElementById("msg");
// 获取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>
</html>七、字符串模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 字符串模板是JavaScript新的特性 用``来定义
// 可以随意换行
// 可以随意添加标点符号
// 可以去插入变量
</script>
</body>
</html>八、html-dom编程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="changeImg()">改变</button><br/>
<img src="你的图片" id="pic1"/>
<script type="text/javascript">
function changeImg(){
// 获取图片的src
var pic1 = document.getElementById("pic1")
// pic.getAttribute("src");//核心dom的方法
// alert(pic1.src); //html dom的方法
// 修改图片的src pic1.setAttribute("src",'修改的图片地址')
pic1.src = '修改的图片地址';
}
</script>
</body>
</html>九、demo_9_html-dom表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="" cellpadding="">
<tr>
<td>书名</td>
<td>价格</td>
<td>操作</td>
</tr>
<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 table = document.getElementsByTagName("table")[0];
// table 默认会添加一个tboody标签！
// table第一个子节点tboby tbody第一个子节点是tr！
var row = table.firstElementChild.firstElementChild;
row.style.backgroundColor = '#f30'
}
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>
</html>
十、购物车（练习）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<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的checkbox发生变法时候，检查all是否该选中了
// 非all的checkbox长度等于等于选中的非allcheckbox all被全选了
// 01 获取所有的非allcheckbox
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");
// 当选中的checkedbox的长度等于所有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
// 获取到所有被选中的checkbox
var sel = document.querySelectorAll("input[type=checkbox]:not(#all):checked");
// 遍历boxes，监听每个checkbox数值发生改变时候
sel.forEach(function(item) { //
// 找到item对应的tr
var tr = item.parentElement.parentElement;
// 找到tr对应的小计
var sub = tr.querySelector("td:nth-of-type(5)");
total += sub.innerText * 1;
})
// 在sum中显示出来
sum.innerText = total;
// 如果checked值true ，找到当前行对应的小计
// 把小计的值累加并放入到sum里面
}
calcTotal();
function checkAll() {
// 选择到全选的checkbox
var all = document.getElementById("all");
// 选择到所有的input，属性为checkbox的，不是id为all
// var boxs = document.querySelectorAll("input[type=checkbox]:not(#all)")
// 遍历boxs 更新每个checks值为all的checked值
boxs.forEach(function(item) {
item.checked = all.checked;
})
}
// 当checkbox被改变时计算总价
calcTotal();
function minus(btn) {
// 通过btn找到input
var input = btn.nextElementSibling;
// 把input的值*1转换为数字在-1
input.value = input.value * 1 - 1;
// 获取价格 btn的父节点是td，td的上一个兄弟节点是price 获取price的文本
var price = btn.parentElement.previousElementSibling.innerText * 1;
// 获取到小计的节点
var sub = btn.parentElement.nextElementSibling;
// 小计的文本就等于input的值*价格
sub.innerText = input.value * price;
}
// 当checkbox被改变时计算总价
calcTotal();
function add(btn) {
// 通过btn 找到input标签(btn的上一个兄弟节点)
var input = btn.previousElementSibling;
// 把input的值加一在赋值给input
input.value = input.value * 1 + 1;
var price = btn.parentElement.previousElementSibling.innerText * 1;
// 获取到小计的节点
var sub = btn.parentElement.nextElementSibling;
// 小计的文本就等于input的值*价格
sub.innerText = input.value * price;
}
// 当checkbox被改变时计算总价
calcTotal();
function delRow(btn) {
// 通过btn找到tr 删除 tr
var tr = btn.parentElement.parentElement;
tr.remove();
}
// 当checkbox被改变时计算总价
calcTotal();
</script>
</body>
</html>十一、事件的监听
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 onclick="callMe()">事件的监听</h1>
<button id="btn">点我</button>
<button id="btn2">随意</button>
<script>
// js响应事件有三种监听方式
// 01 事件响应写在hetl的标签内
function callMe(){
alert("我不淡定了")
}
// 02 在js的对象属性中监听
var btn = document.getElementById("btn");
// btn.onclick = callMe; // 不要括号
btn.onclick = function(){
alert("要线下了，我很开心")
}
// 03 通过addEventListener 注册
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",callMe);
btn2.addEventListener("click",function(){
alert("开心。。。")
})
// 英文单词： add 添加 EVent 事件 Listenter 监听器
// 英文单词： click（事件名称） callme 事件响应的函数
</script>
</body>
</html>
1655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
