Day 017
一、DOM操作获取节点
1.DOM(document object model) 操作
- js提供了一个document,指向的是HTML,在js中通过document对象可以直接或间接获取页面内容对应的标签
2.DOM操作具体内容-操作节点(节点就是标签)
a. 直接获取节点
document.getElementById(id属性值)-通过id属性值获取标签
document.getElementByClassName(classs属性值)
document.getElementsByTagName(classs属性值)
b. 获取父节点:节点.parentElement - 获取指定节点的父节点。
c. 获取子节点:
- 节点.children - 获取指定节点的所有子节点。
- 节点.firstElementChildren - 获取指定节点的第一个子节点。
- 节点.lastElementChildren - 获取指定节点的最后一个子节点。
d. 添加节点
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id ="box1">
<p id = "p1">段落</p>
</div>
<div id ="box2">
<a href="">百度</a>
<p id = "p2">段落</p>
</div>
<div id ="box3">
<p id = "p3">段落</p>
</div>
<script type="text/javascript">
// 通过id取节点
p1=document.getElementById('p1')
console.log(p1)
// 颜色写法1
p1.style.color = 'red'
// 颜色写法2
// p1.style = 'color:red;'
// 通过标签获取节点
p2 = document.getElementsByTagName('p')
console.log(p2)
// 通过for 循环更改颜色
colors = ['blue','green','pink']
for(x in p2){
// p2[x].style.color=colors[x]
p2[x].style = `color : ${colors[x]};`
}
// 获取父节点法:
div1 = document.getElementById('p1').parentElement
console.log(div1)
</script>
</body>
</html>
二、DOM操作删除节点
.1.remove()删除节点
- 语法:节点.remove()
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id='p1'>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script>
//remove()删除节点
//节点.remove()
p1 = document.getElementById('p1')
p1.remove()
// 取出页面所有p标签 进行打印根据下标删除对应的段落
p = document.getElementsByTagName('p')
console.log(p)
p[1].remove()
</script>
</body>
</html>
三、DOM操作添加节点
1.创建新的节点
- document.createElement(标签名)
2.添加节点
- 节点1.appendChild(节点2)- 在节点1的最后添加节点2(节点1和节点2是父子)
- 节点1.insertBefore(节点2,节点3) - 在节点1中节点3的前边添加节点2
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// script 也为一个标签,遵循标签的先后顺序
document.write('<span>aaa</span>')
</script>
<div id='div1'>
<p p = 'p1'>段落</p>
</div>
<script>
// 直接向body标签添加子标签
document.write('<span>aaa</span>')
</script>
<script>
// 向p标签前添加新标签
a = document.createElement('a')
p = document.getElementById('p1')
div1 = document.getElementById('div1').insertBefore(a,p)
</script>
</body>
</html>
四、04-DOM操作节点中添加内容和属性
1.节点.innerText — 标签内部的文字(子标签也属于文字)
2. 节点.innerHTML — 标签内部的文字 (包括子标签内部的文字)
列:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a>百度<b>一下</b></a>
<script>
a1 = document.getElementsByTagName('a')
// a1[0].innerText='HTML'
// a1[0].innerText='HTML<b>CSS</b>'
// a1[0].innerHTML='HTML'
a1[0].innerHTML='HTML<b>CSS</b>'
// 节点.属性=属性值 ---- 向节点内添加或者修改属性
a1[0].href = 'https://www.baidu.com'
a1[0].target='_blank'
a1[0].className='a2'
</script>
</body>
</html>
五、JavaScript操作浏览器
1.操作在浏览器中用打开新的窗口
- 打开窗口:window.open
- 关闭窗口:w1.close
- 移动窗口位置:.moveTo(x,y)
例:创建一个新的窗口并且可针对瀑布式加载进行滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 打开浏览器新标签页
function openwindow1(){
w1=window.open('https://www.baidu.com')
}
// 关闭刚打开的新标签页
function close1(){
w1.close()
}
// 打开新的窗口
function openwindow2(){
w2 = window.open('https://www.baidu.com','_blank','width=1920,height=1080')
//w2.moveTo(500,200)
}
// 关闭新的窗口
function close2(){
w2 = window.open('https://www.baidu.com','_blank','width=1920,height=1080')
w2.close()
}
// 关闭当前窗口
function close3(){
window.close()
}
// 页面滚动应用:瀑布式加载页面
function to_bottom(){
// window.scrollTo(x,y)
y = 0
y_max = 5000
while(y<=y_max){
y +=500
}
window.scrollTo(0,y)
}
</script>
<input type="submit" value="打开新窗口" onclick = 'openwindow2()'>
<input type="submit" value="关闭新窗口" onclick = 'close2()'>
<br>
<input type="submit" value="打开新标签页 "onclick = 'openwindow1()'>
<input type="submit" value="关闭新标签页" onclick = 'close1()'>
<br>
<input type="submit" value="关闭当前窗口" onclick = 'close3()'>
<input type="submit" value="滚动到页面底部" onclick = 'to_bottom()'>
<div style="height: 5000px;">
</div>
<p>页面底部</p>
</body>
</html>