JavaScript-DOM操作
1.DOM
DOM(document object model),文档对象模型。
JS中有一个系统提供的对象叫document,指向整个网页。
HTML中的每个标签，在js中都是document下面的节点，类型都是document
2.DOM操作
2.1获取节点
- 获取元素（标签/节点）
在Js中获取html中的标签
<script type="text/javascript">
//1)根据id获取标签对应的节点
//document.getElementById(id值) - 返回一个标签对象
let pNode = document.getElementById('p1')
console.log(pNode, typeof(pNode))
//2)根据class值获取节点
//document.getElementsByClassName(class属性值) - 返回一个数组
let c1Nodes = document.getElementsByClassName('c1')
//通过下标获取单独某一个标签
console.log(c1Nodes[1])
//遍历取出每个选中的标签
for(x=0;x<c1Nodes.length;x++){
console.log(x, c1Nodes[x])
}
// 3) 根据标签名获取节点
//document.getElementsByTagName - 返回一个数组
let pNodes = document.getElementsByTagName('p')
console.log(pNodes)
//4) 获取父节点
//子节点.parentElement - 返回一个节点
let aNode = document.getElementById('a1')
let aParentNode = aNode.parentElement
console.log(aParentNode)
//5)获取子节点
//父节点.children - 获取指定节点下所有的子节点(不包括孙子等节点), 结果是数组
let parentNode = aParentNode
console.log(parentNode.children)
//父节点.firstElementChild - 获取第一个子节点
//父节点.lastElementChild - 获取最后一个子节点
console.log(parentNode.firstElementChild)
console.log(parentNode.lastElementChild)
</script>
3.DOM操作节点操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--===================1.=================-->
<div id="div1" style="width: 200px; height: 200px; background-color: aliceblue;">
<p>我是段落</p>
<a href="">我超链接</a>
</div>
<div id="div2" style="width: 300px; height: 300px; background-color: lightcoral;">
</div>
<!--<img src="img/aaa.ico" alt="" title="" />-->
<!--===================2.=================-->
<div id="div3" style="width: 100px; height: 60px; background-color: khaki; margin-bottom: 20px;">
<p>我是段落1</p>
</div>
<button onclick="copyDiv3()">复制</button>
</body>
</html>
<script>
//1.创建节点对象
//document.createElement(标签名) - 创建指定标签对应的节点
let imgNode = document.createElement('img')
imgNode.src = 'img/luffy.jpg' //属性设置
imgNode.title = '路飞'
console.log(imgNode)
//2.添加节点
//父标签.appendChild(新标签) - 在指定的标签最后添加一个新的子标签
let bodyNode = document.getElementsByTagName('body')[0]
let divNode = document.getElementById('div1')
bodyNode.appendChild(imgNode)
//注意：如果同一个标签被添加多次，那么最后一次有效
//父标签.insertBefore(新标签, 标签2) - 在父标签中标签2的前面插入一个新标签
let div2Node = document.getElementById('div2')
bodyNode.insertBefore(imgNode, div2Node)
//同一个标签加多次，最后一次有效
// div2Node.appendChild(imgNode)
// 父标签.insertBefore(新标签, 标签2) - 在父标签中标签2的前面插入新标签
// bodyNode.insertBefore(imgNode, div2Node)
//3.删除节点
//父节点.removeChild(子节点) - 删除父节点中指定的子节点
// bodyNode.removeChild(bodyNode.firstElementChild)
div1Node.removeChild(div1Node.lastElementChild)
//节点.remove() - 删除指定节点
document.getElementById('div2').remove()
//4.拷贝节点
//节点.cloneNode() - 拷贝指定节点产生一个新的节点(新节点和原节点一样)，浅拷贝(不会复制子标签)
//节点.cloneNode(true) - 拷贝指定节点产生一个新的节点(新节点和原节点一样)，深拷贝(会复制子标签)
function copyDiv3(){
var div3Node = document.getElementById('div3')
var newDiv3Node = div3Node.cloneNode(true)
bodyNode.insertBefore(newDiv3Node, document.getElementsByTagName('button')[0])
}
//
let div3Node = document.getElementById('div3')
let aNode = document.createElement('a')
aNode.href = 'https://www.baidu.com'
//innerText: 双标签的文本内容
aNode.innerText = '百度一下' // <a>百度一下</a>
//innerHTML：双标签的标签内容
// aNode.innerHTML = '百度一下<img src="img/aaa.ico">'
div3Node.replaceChild(aNode, div3Node.firstElementChild)
</script>
