JavaScript（二）--DOM和BOM

BOM对象

1、window 代表浏览器窗口

window.alert(11);//可以弹窗

2、Navigator 封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36"

3、screen 屏幕尺寸

screen.width
1366
screen.height
768

4、location 代表当前页面的URL信息

host:"www.baidu.com"
hostname:"www.baidu.com"
href:"https://www.baidu.com/index.php?tn=02049043_8_pg&ch=9"
origin:"https://www.baidu.com"
pathname:"/index.php"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.kuangstudy.com/')

5、document 代表当前页面
可以获取文档的树节点

document.title
"百度一下，你就知道"
document.title='哈哈哈'
"哈哈哈"

6、history 代表浏览器的历史记录

history.back() //后退
history.forward() //前进

DOM对象

1、获得dom节点

//获得id选择器
			var father=document.getElementById("father");
			//获得标签选择器
			var h1=document.getElementsByTagName("h1");
			//获得类选择器
			var p1=document.getElementsByClassName("p2");
			var child=father.children;//获得父节点下面的子节点

2、更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

-  `id1.innerText='456'` 修改文本的值
-  `id1.innerHTML='<strong>123</strong>'` 可以解析HTML文本标签

操作css

id1.style.color = 'yellow'; // 属性使用 字符串 包裹
id1.style.fontSize='20px'; // - 转 驼峰命名问题
id1.style.padding = '2em'

3、删除节点

删除节点的步骤： 先获取父节点，在通过父节点删除自己 不可以自己删除自己

var self=document.getElementById("p1");
			var father=self.parentElement;
			//father.removeChild(self);//父节点删除自己
			// 删除是一个动态的过程；
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])//可能不存在，因为删除了一个下标就会往前移动

== 删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意 ==

4、插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个DOM 节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);// 追加到后面
</script>

效果如图：

插入标签

<script>
				//已经存在的标签