当前位置：首页 > news >正文

JavaScriptDay3

news 2026/6/10 16:38:33

7.操作BOM对象（重点）

7.1、浏览器介绍

JavaScript和浏览器的关系？

JavaScript的诞生就是为了能够让它在浏览器中运行！

BOM:浏览器对象模型

IE
Chorome
Safari
FireFox

7.2、window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
798
window.innerWidth
278

7.3、Navigator（不建议使用）

Navigator封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36'
navigator.platform
'Win32'

大多数时候，我们不会使用navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

7.4、screen

代表屏幕尺寸

screen.width
1920
screen.height
1080

7.5、location(重要)

location代表当前页面的URL信息

host: "localhost:63342"
href: "http://localhost:63342/JavaScript/lesson02
protocol: "http:"
reload:f reload() //刷新网页 相当于F5
//设置新的地址
location.assign('https://home.cnblogs.com/u/Sunyn-blogs')

7.6、document

document代表当前的页面 HTML DOM文档树

获取具体的文档树节点

<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd></dl><script>var dl = document.getElementById('app')
</script>

获取cookie

劫持cookie原理：

恶意人员写一个非法网站里面有非法js文件可能会获取你的cookie，再通过ajax上传到他的服务器

服务器端可以设置cookie：httpOnly

7.7、history（不建议使用）

history代表浏览器的历史记录

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

8.操作DOM对象（重点）

8.1、核心

浏览器网页就是一个DOM树形结构！

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点

//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');var childrens = father.children; //获取父节点下的所有子节点

这是原生代码，之后我们尽量都是用jQuery();

8.2、更新节点

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

操作文本

id1.innerText='456' 可以修改文本的值
id1.innerHTML= '123'可以解析HMTL文本标签

操作JavaScript

id1.style.color = 'red'
'red'
id1.style.fontSize = '20px'
'20px

8.3、删除节点

步骤：先获取父节点，再通过父节点删除

<div id="father"><h1>标题一</h1><p id = "p1">p1</p><p class="p2">p2</p></div><script>var self = document.getElementById(p1)var father = p1.parentElement;
</script>

如果想删除p1：father.removeChild(self)

也可以这样删除

father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])

但是要注意删除是一个动态的过程，如果第一个元素被删除了，那么原来的第二个元素就会成为第一个元素

8.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');</script>

原：

追加后：

8.5、创建新标签

<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');//通过JS，创建一个新的节点var newP = document.createElement('p');//创建一个p标签newP.id = 'newP';newP.innerText = 'Hello,sunyaning';
</script>

//创建一个标签节点var myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');

myScript.setAttribute('type','text/javascript');等价于

8.6、insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//insertBefore(newNode,targetNode)
list.insertBefore(js,ee);