JavaScript学习(三)

操作BOM对象

浏览器介绍

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

  • IE 6-11
  • Chrome
  • Safari
  • FireFox

第三方

  • QQ浏览器
  • 360浏览器

window(重要)

代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
232
window.innerWidth
940
window.outerHeight
831
window.outerWidth
954

JavaScript学习(三)_第1张图片

Nevigator

封装了浏览器的信息

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

大多数的时候,我们不会使用navigator对象,因为会被人为修改
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.height
864 px
screen.width
1536 px

location(重要)

代表当前页面的URL信息
JavaScript学习(三)_第2张图片

document

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

document.title
"百度一下,你就知道"
document.title = "千度一下,你也不知道"
"千度一下,你也不知道"

JavaScript学习(三)_第3张图片

获得具体的文档数节点

    
Java
JavaSE
JavaEE

JavaScript学习(三)_第4张图片

history

代表浏览器的历史记录

history.back();//后退,跳到刚才浏览的页面
history.forward();//前进

操作DOM对象

DOM:文档对象模型,

核心

浏览器网页就是一个DOM属性结构!

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

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

标题一

p1

p2

更新节点

操作文本

  • id1.innerText='456' 修改文本的值
  • id1.innerHTML='

    标题一

    ' 可以解析HTML文本标签

操作CSS

id1.style.color="yellow";
id1.style.fontSize='50px';
id1.style.padding='2em';

JavaScript学习(三)_第5张图片

删除节点

步骤:先获取父节点,通过父节点删除自己

标题一

p1

p2

JavaScript学习(三)_第6张图片

创建一个新的标签,实现插入

JavaScript

JavaSE

JavaEE

JavaME

你可能感兴趣的:(JavaScript学习(三))