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

JavaScriptDay3

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文档树

image

获取具体的文档树节点

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

获取cookie

image

劫持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' 可以修改文本的值

    image

  • id1.innerHTML= '123'可以解析HMTL文本标签

    image

操作JavaScript

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

image

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)

image

也可以这样删除

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>

原:image

追加后:

image

image

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>

image

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

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

image

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);

image

9.操作表单

9.1、表单是什么 form

  1. 文本框 text
  2. 下拉框
http://www.hskmm.com/?act=detail&tid=32445

相关文章:

  • 2025 年标识标牌制造厂家最新推荐排行榜:解读行业头部企业产能与技术实力,精选优质品牌供订做参考
  • 四输入六输出的欠驱动系统建模与仿真
  • DocumentFormat.OpenXml + MiniWord:Word 文档合并与内容赋值的优雅组合
  • CSS三大特性
  • HolmesGPT 正式上线 丨 KubeSphere 助力云原生智能排障新体验
  • MAUI开发安卓应用,采用PC的chrome浏览器调试平板网页
  • 【SPIE出版 | 高校主办,有ISSN、ISBN号 】第四届交通运输工程前沿国际学术会议(FTTE 2025)
  • 【学习笔记】回文自动机初步总结
  • 【学习笔记】回滚莫队初步总结
  • MATLAB中基于 S-V模型进行毫米波信道建模与仿真
  • python之模块
  • 2025 年电动阀门厂推荐榜:电动/气动/高压/真空阀门厂,上海巨良阀门凭技术与口碑领跑行业
  • 认知与困境
  • 【学习笔记】线性基
  • x86_64架构__rdtsc指令
  • KTT
  • AT_joisc2021_c フードコート (Foodcourt)
  • SPP question regarding Issues Due To Gaming Spoofers
  • 类型安全ORM的高并发场景解决方案 - 实践
  • L06_mybatis读取MySQL数据库(懵逼版)
  • 提供给第三方接口的验证方法
  • 【2025最新】6款免费DLL修复工具推荐:彻底解决“XXX.dll缺失”问题!
  • 2025 年注浆管生产厂家最新推荐排行榜:聚焦 0.3mm 精度与国企合作案例,助力基建企业精准挑选优质供应商
  • 2025 年试验箱厂家 TOP 企业品牌推荐排行榜,氙灯老化 / 紫外老化 / 冷热冲击 / 恒温恒湿 / 高低温 / 快速温变 / 盐水喷雾 / 高温老化 / 砂尘 / 淋雨试验箱公司推荐!
  • 系统修复
  • 什么是vibe ?
  • 2025年10月试验箱厂家最新推荐排行榜:氙灯老化试验箱,紫外老化试验箱,冷热冲击试验箱,恒温恒湿试验箱公司推荐!
  • AI时代我们需要更多开发者:Shalini Kurapati的技术洞察
  • 新一代虚拟助手AI技术挑战赛启动
  • CSS各种选择器