JS中DOM节点

JS中DOM节点

DOM节点操作方法

1.直接获取节点 ->document.getElenmentById(‘id属性值’) -通过id属性值获取标签

getElenmentByClassName(‘class属性值’) -通过class属性值获取标签

getElenmentsTapName(‘标签名’) -通过标签名获取标签

2.获取父节点：节点.parentElenment —获取指定节点的父节点

3.获取子节点：节点.children —获取指定节点的子节点

节点.firstElenmentChild —获取指定节点的第一个子节点

节点.lastElenmentchild —获取指定节点的最后一个子节点

4.添加节点： 1）创建新节点doucment.createElenment(标签名)

2）加入节点：a. 节点1.appendChild(节点2) -在节点1的最后添加节点2（节点1和节点2是父子关系）

b.节点1.insertBefore(节点2，节点3) —在节点1中，节点3之前添加节点2

如果使用document.write(‘…’)方式添加的，会直接为body标签的子标签

5.删除节点：节点.remove 删除整个这个节点

JS中向节点中添加文字或属性 或者 修改文字或属性

节点.innerText —向节点中直接添加或修改文字（子标签也属于文字）

节点.innerHTML —向节点中直接添加或者修改文字（子标签属于标签形式，只会添加子标签属性中的文字）

例如

<a class='a1'>百度<b>一下</b></a>

<script>
    a1 = document.getElementsByTagName('a')
a1[0].innerText = 'HTML'
a1[0].innerText = 'HTML<b>css</b>'        // 打印出来是HTML<b>css</b>
// 下者会保留写的子标签的属性
a1[0].innerHTML = 'HTML<b>css</b>'     //  打印出来时HTMLcss（css会加粗这个无法显示）
// 节点.属性 =属性值    --->向节点添加或修改属性
</script>

JS的应用

窗口的添加与删除

			// 打开浏览器新标签页：window.open()
			function openwindow1(){
				w1= window.open('https://www.baidu.com')
			}
			// 关闭刚打开的新标签页
			function close1(){
				w1.close()
			}
			// 打开新的窗口
			function openwindow2(){
				w2= window.open('https://www.baidu.com','_blank','width=100,height=100')
				// w2.moveTo(500,200)
			
			}
			function close2(){
				w2.close()
			}
			// 关闭当前窗口函数
			function close3(){
				window.close()
			}
			// 页面滚动
			// 瀑布式加载页面
			function to_bottom(){
				// window.scrollTo(x,y)
				y = 0
				y_max =5000
				while(y<y_max){
					y+=1
					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()">
		<input type="submit" value="滚动到页面底部" onclick="to_bottom()">
		<div style="height:5000px;"></div>
		<p>页面底部</p>