操作BOM对象、操作DOM对象 2022-2-21

最新推荐文章于 2024-08-20 10:34:21 发布

心️要努力吖

最新推荐文章于 2024-08-20 10:34:21 发布

阅读量242

点赞数

分类专栏：笔记文章标签： safari chrome javascript

本文链接：https://blog.csdn.net/m0_56661579/article/details/123051689

版权

笔记专栏收录该内容

61 篇文章 0 订阅

订阅专栏

一、操作BOM对象

1,1浏览器介绍

JavaScript 和浏览器关系
JavaScript 诞生就是为了能够让他在浏览器中运行
BOM浏览器对象模型

window

window代表浏览器窗口,调整浏览器窗口也可以改变高度和宽度

window.alert(1)
undefined
window.innerHeight
150
window.innerWidth
886
window.outerHeight
908
window.outerWidth
901

在这里插入图片描述

navigator

封装了浏览器的信息

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

大多数时候我们不会使用navigator对象，因为会被人为修改
在这里插入图片描述

screen

代表屏幕尺寸

screen.width
1440
screen.height
960

在这里插入图片描述

location(重要)

代表当前页面的url信息

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=44004473_27_oem_dg"
protocol: "https:"
reload: ƒ reload()   //刷新网页
//设置新的地址
location.assign('某个网页网址')

document

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

document.title
'百度一下，你就知道'
document.title='名字'
'名字'

在这里插入图片描述

取具体的文档树节点

<dl id="dl">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

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

在这里插入图片描述

获取cookie

document.cookie

在这里插入图片描述

history

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

二、操作DOM对象（重点）

2.1核心：

浏览器网页就是一个DOM树形结构
更新：更新DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获得DOM节点</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    //对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
</script>
</body>
</html>

    var childrens = father.children;
    //father.firstChild
    //father.lastChild

在这里插入图片描述

心️要努力吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作BOM对象、操作DOM对象 2022-2-21

一、操作BOM对象1,1浏览器介绍JavaScript 和浏览器关系JavaScript 诞生就是为了能够让他在浏览器中运行BOM浏览器对象模型windowwindow代表浏览器窗口,调整浏览器窗口也可以改变高度和宽度window.alert(1)undefinedwindow.innerHeight150window.innerWidth886window.outerHeight908window.outerWidth901navigator封装了浏览器的信息na
复制链接

扫一扫