一、节点关系
父子
父节点 --parentElement
所有子节点 --children
第一个子节点-- firstElementChild
最后个子节点 --lastElementChild
兄弟
上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling
例:
<body>
<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>
二、属性操作
getAttribute --获取属性
setAttribute --设置属性
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核心编程 ,每个元素都是一个节点,节点有不同类型有不同信息。
nodeName(节点的名称)
元素节点:返回的是元素标签名大写 例P。
文本节点:返回#text。
nodeType(节点的类型)
元素节点:1
文本节点:3
nodeValue(节点的值)
元素节点:none
文本节点:文本内容
例:
<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>
四、节点的操作
1、创建节点--document.createElement(tag)
2、删除节点:
elem.remove()
elem.parentElment.removeChild(elem)
3、复制节点
复制节点 ,不带子节点
var elem2 = elem.cloneNode(false)
复制节点,带子节点
var elem3 = elem.cloneNode(true)
4、插入节点
parent.insertBefore(新的节点,相关节点)
把新的节点插入到 相关节点的前面
5、替换节点
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>
五、表格操作
1、创建行
row = table.insertRow(index)
2、创建列
col = row.insertCell(index)
3、设置列的内容
col.innerText="xxx"
4、选择第一行
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>
六、select下拉框
1、创建一个option
var option = new Option(text,value)
2、插入一个option
select.add(option,before)
七、事件的注册
1、DOM()在html标签中。例<h1 οnclick="callMe()"></h1>
2、DOM1 实现js与html分离。
btn.οnclick=callMe;
btn.onclick = function(){}
(多次注册,只会执行最后一个)
3、DOM2 可以添加多个,也可以移除。
btn.addEventListener(“click”,callMe)
btn.addEventListener("click",function(){})
4、移除全部click。
btn.removeEventListenter("click")
移除一个
btn.removeEventListenter("click",callMe)
<body>
<h1 onclick="callMe()">事件的监听</h1>
<button>点我</button>
<script>
//js响应事件有三种监听方式
//01事件响应写在HTML标签属性里面
function callMe(){
alert("我被点到了")
}
//在js对象的属性中监听
var btn=document.getElementById("btn");
// btn.onclick=callMe;//不要圆括号
btn.onclick=function(){
alert("要线下了,我很开心")
}
//通过addEventListener注册(可以注册多个)
var btn2=document.getElementById("btn2");
btn2.addEventListener("click",callMe)
btn2.addEventListener("click",function(){
alert("开心要见到你们了");
})
</script>
</body>