【狂神说Java】JavaScript学习笔记-操作BOM对象

最新推荐文章于 2022-12-29 11:22:57 发布

杨青葱

最新推荐文章于 2022-12-29 11:22:57 发布

阅读量278

点赞数

文章标签： java javascript

本文链接：https://blog.csdn.net/LUSH_BOY/article/details/113062702

版权

7、操作BOM对象（重点）

浏览器介绍
视频链接：https://www.bilibili.com/video/BV1JJ41177di?from=search&seid=6715593633392022867

javascript和浏览器关系？
BOM：浏览器对象模型

IE6~11
Chrome
Safari
FireFox
Opera

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口
在这里插入图片描述

Navigator（不建议使用）

Navigator封装了浏览器的信息
在这里插入图片描述
大多数时候，我们不会使用navigator对象，因为会被认为修改!
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

在这里插入图片描述

location(重要)

location代表当前页面的URL信息
在这里插入图片描述

document（内容DOM）

document代表当前的页面，HTML DOM文档树
在这里插入图片描述
获取具体的文档树节点

获取cookie

劫持cookie原理
www.taobao.com

服务器端可以设置cookie为httpOnly

history（不建议使用）

history代表浏览器的历史记录
在这里插入图片描述

8、操作DOM对象（重点）

DOM：文档对象模型

核心

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

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

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

获得Dom节点

在这里插入图片描述
这是原生代码，之后我们尽量都使用jQuery();

更新节点

在这里插入图片描述
操作文本

操作css

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己
在这里插入图片描述
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

插入节点

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

追加
在这里插入图片描述

创建一个新的标签

<script>
	var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.creatElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,Kuangshen';
    //创建一个标签节点
    var myScript = document.creatElement('script');
    myScript.setAttribute('type','text/javascript');
    
    //可以创建一个style标签
    var myStyle = document.creatElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
    
    document.getElementByTagName('head')[0].appendChild(myStyle);
</script>
123456789101112131415161718

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

12345