节点关系
父子
父节点 parentElement
所有子节点 children
第一个子节点 firstElementChild
最后个子节点 lastElementChild
兄弟
上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling
<h1>节点关系查找</h1>
<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>
dom步进器
<h1>步进器</h1>
<p>
<button type="button" onclick="minus(this)">-</button>
<input type="text" name="" id="" value="1" />
<button type="button" onclick="add(this)">+</button>
</p>
<p>
<button type="button" onclick="minus(this)">-</button>
<input type="text" name="" id="" value="1" />
<button type="button" onclick="add(this)">+</button>
</p>
<p>
<button type="button" onclick="minus(this)">-</button>
<input type="text" name="" id="" value="1" />
<button type="button" onclick="add(this)">+</button>
</p>
<script type="text/javascript">
// this必须加,就是btn,只有通过btn才能找到对应input
function minus(btn){
// 通过btn获取input
var input=btn.nextElementSibling;
input.value=input.value*1-1;
}
</script>
<script type="text/javascript">
// 单击+让input值+1,单击-让input值-一
function add(btn){
// 通过btn获取input
var input=btn.previousElementSibling;
// 重新设置input的值 原来input值*1转换为数字+1
input.value=input.value*1+1;
}
</script>
dom属性修改
getAttribute 获取属性
setAttribute 设置属性
removeAttribute 移除属性
<h1>属性修改</h1>
<img src="./tupian/pic1.png" ><br/>
<button onclick="changeImg()" type="button">修改图片</button>
<script type="text/javascript">
function changeImg(){
var img=document.querySelector("img");
console.log(img.getAttribute("src"))
img.setAttribute("src","tupian/pic2.png");
img.removeAttribute("alt");
}
// getAttribute 获取属性
// setAttribute 设置属性
// removeAttribute 移除属性
// get 获取
</script>
dom节点信息
节点信息
解释:js的DOM核心编程 ,每个元素都是一个节点
节点有不同类型有不同信息
nodeName节点的名称
元素节点:返回的是元素标签名大写 例P
文本节点:返回#text
nodeType
节点的类型
元素节点:1
文本节点:3
1-9都有
nodeValue节点的值
元素节点:none
文本节点:文本内容
<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>
dom节点的创建于插入
<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>
制作留言板
<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>
dom编程
<script>
function changeImg(){
var pic1 = document.getElementById("pic1");
// 获取图片的src
// pic.getAttribute("src"); //核心dom的方法
// alert(pic1.src); //html dom的方法
pic1.src='images/pic2.png';
}
</script>