dom编程

节点关系
    父子
父节点 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>

---