首页 > 其他分享 >BOM

BOM

时间:2023-04-15 21:34:54浏览次数:25  
标签:对象 标签 js BOM 操作 文本

目录

BOM操作

BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”


window.open()
	 window.open('https://www.sogo.com/','','width=800px,left=200px')
window.close()
	 关闭当前浏览器窗口
navigator.userAgent
	 标识自己是一个浏览器
history.forward()  
	 前进一页
history.back()  
	 后退一页
window.location.href
	 获取当前页面所在的网址 也可以再加赋值符号和网址跳转
window.location.reload()
	 刷新当前页面
alert()
	 警告框
confirm()
	 确认框
prompt()
	 提示框


计时器相关操作(重要)

	 let t = setTimeout(showMsg, 3000)  // 3000毫秒之后执行函数
    clearTimeout(t)  // 取消任务
	
    s = setInterval(func, 3000)		// 每隔3000毫秒执行一次
    clearInterval(s)  // 取消任务

DOM操作

DOM (Document Object Model)是指文档对象模型,通过它可以访问HTML文档的所有元素

既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)

查找标签

"""
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
"""
document.getElementById('d1')
	结果就是标签对象本身
document.getElementsByClassName('c1')
	结果是数组里面含有多个标签对象
document.getElementsByTagName('span')
	结果是数组里面含有多个标签对象

parentElement             父节点标签元素
children                 所有子标签
firstElementChild        	第一个子标签元素
lastElementChild         	最后一个子标签元素
nextElementSibling       	下一个兄弟标签元素
previousElementSibling   	  上一个兄弟标签元素

操作节点

// js代码创建一个标签
let aEle = document.createElement('a')

// js代码操作标签属性
aEle.href = 'http://www.lsmpx.com/'  只能添加默认的属性
setAttribute()兼容默认属性和自定义属性
getAttribute("age")
removeAttribute("age")

// js代码操作标签文本
aEle.innerText = '这个很攒劲!'

// js代码查找div标签并将a追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)


.innerText  		 获取标签内部所有的文本内容
.innerText = '文本'  替换/设置标签内部的文本(不识别标签语法)

.innerHTML			获取标签内部所有的标签包含文本
.innerHTML = '文本'  替换/设置标签内部的文本(识别标签语法)

获取值操作

1.针对用户输入的和用户选择的标签
	标签对象.value
2.针对用户上传的文件数据
	标签对象.files    	fileList  [文件对象、文件对象、文件对象]
	标签对象.files[0]	 文件对象

标签:对象,标签,js,BOM,操作,文本
From: https://www.cnblogs.com/whxx/p/17321922.html

相关文章

  • Xml的编码和Bom
    W3C定义了三条XML解析器如何正确读取XML文件的编码的规则:1,如果文挡有BOM(字节顺序标记,一般来说,如果保存为unicode格式,则包含BOM,ANSI则无),就定义了文件编码2,如果没有BOM,就查看XML声明的编码属性3,如果上述两个都没有,就假定XML文挡采用UTF-8编码首先,XML解析器根据文件的BOM来解析文件;......
  • BOM对象
    BOM对象Window:浏览器窗口对象Navigator:浏览器对象Screen:屏幕对象History:历史记录对象Location:地址栏对象Window对象获取直接window.方法名,window.可以省略方法alert()confirm()confirm--确定(返回true)取消--返回false//方法//confirm--确定(返回t......
  • BOM(Browser Object Model)对象模型
    ?window对象是全局对象,基本BOM的属性和方法都是window的window属性和方法属性方法点击某按钮,回到顶部window.scrollTo(0,0)......
  • BOM介绍
       ......
  • 如果要读这么大的BOM,如何做比较合适?
    A、如果要读这么大的BOM,如何做比较合适?B、一般就是部分获取,控制量,到一定量信息缓存到硬盘,然后将之前获取过的对象置为null让java的回收机制自动运行C、中间表B、不过这个数量级的我没做过B、我也不敢保证这样就万无一失C、百万级的我只做过接收然后创建对象C、没做过读取......
  • 系统化学习前端之JavaScript(BOM)
    前言DOM提供了JavaScript操作页面的API,BOM提供了JavaScript操作浏览器的API。BOMBOM浏览器对象模型,BOM的核心只有一个window对象。window对象在JavaScrip......
  • JS之BOM、DOM
    https://www.cnblogs.com/12345huangchun/p/10171146.html一、BOM对象1,window对象所有浏览器都支持window对象,从概念上讲:一个HTML文档对应一个window对象,从功能......
  • JavaScript BOM
    Window对象的常用属性属性名称说明history有关客户访问过的URL的信息location有关当前URL的信息screen只读属性,包含客户端显示屏幕的信息语法:window.属性名="属性值";w......
  • BOM 浏览器对象大全
    原文链接:   https://note.noxussj.top/?source=51ctowindow对象提示框alertalert(1)确认提示框confirmvarconf=confirm('是否打开')//trueorfalse定时器setTi......
  • sbom +dependencytrack 进行软件组件安全性分析
    随着安全越来越重要,日常中我们对于自己开发的软件进行安全扫描同时作为一个常规化的任务是比较重要的,对于依赖组件基于sbom+dependencytrack是一个很不错的选择,而且成本比......