首页 > 其他分享 >前端基础之BOM和DOM

前端基础之BOM和DOM

时间:2023-07-24 19:46:29浏览次数:33  
标签:DOM 标签 前端 元素 BOM var document 节点 属性

window对象常用方法

● window.innerHeight - 浏览器窗口的内部高度
● window.innerWidth - 浏览器窗口的内部宽度
● window.open() - 打开新窗口
● window.close() - 关闭当前窗口
navigator.appName  // Web浏览器全称
navigator.appVersion  // Web浏览器厂商和版本的详细字符串
navigator.userAgent  // 客户端绝大部分信息
navigator.platform   // 浏览器运行所在的操作系统

history对象

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

location对象

location.href //获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

计时相关

1. var t=setTimeout("JS语句",毫秒)  # 开一个定时器,只执行一次
2. var t=setInterval("JS语句",毫秒)  # 开一个定时器,执行多次,直到清除定时器
3. clearTimeout('定时器') #清除定时器
4. setTimeout('js语句',毫秒) #定时触发清除定时器

DOM

DOM标准规定HTML文档中的每个成分都是一个节点(node):
● 文档节点(document对象):代表整个文档
● 元素节点(element 对象):代表一个元素(标签)
● 文本节点(text对象):代表元素(标签)中的文本
● 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
● 注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML:
● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应

查找标签

直接查找

通过ID查找:
	var a=document.getElementById('d1');
	console.log(div);
通过class查找:
	var b=document.getElementByClassName('c1')[0]; //返回的是数组,因为class可以重复有多个,因此所有的都放在一个数组中
	console.log(b)
通过标签查找
	var c=document.getElementByTagName('div'); //展示的是包含所有的div标签的数组
通过name属性查找
	var d=document.getElementByName('username');

间接查找

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

节点操作

创建节点

var img =document.createElement('img'); //创建空的img标签

添加节点

img.src='111.png'; //给img标签设置src属性

img.setAttribute('username','a'); //设置自定义属性与设置标签自带属性不同
img.removeAttribute('username'); //删除自定义属性
div=document.getElementById('d1');
div.appendChild(img); //将img标签放入div中

删除节点

div.removeChild(img);

替换节点

div.replaceChild(新的节点,旧的节点)

属性节点

获取文本节点的值:
	var divEle = document.getElementById("d1")
	divEle.innerText
	divEle.innerHTML
设置文本节点的值:
	var divEle = document.getElementById("d1")
	divEle.innerText="1" //不能添加标签
	divEle.innerHTML="<p>2</p>" //可以添加标签

Attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

获取值操作

语法:
elementNode.value
适用于以下标签:
● .input
● .select
● .textarea 
● value不能获取文件数据,获取文件数据要用files

class的操作

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true,否则返回false
classList.toggle(cls)  存在就删除,否则添加

JS操作CSS属性的规律:
1.对于没有中横线的CSS属性一般直接使用style.属性名即可
2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。
下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

常用的事件:

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。

绑定方式

方式一:

直接在标签属性中添加
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
	ths.style.backgroundColor="green";
  }
</script>
//this是实参,表示触发事件的当前元素。
//函数定义过程中的ths为形参。

方式二:

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
	this.innerText="呵呵";
  }
</script>

标签:DOM,标签,前端,元素,BOM,var,document,节点,属性
From: https://www.cnblogs.com/yexinli/p/17577476.html

相关文章

  • 前端请求报错:'JSON parse error: syntax error, expect {, actual e…1, line 1, colu
    1、如果不用JSON.stringify(inputJson)包起来就会报错letinputJson={"selectUid":selectUid};varresponse=await$.ajax({type:'POST',url:'xxx',data:inputJson,//正确的是JSON.stringify(inputJson)......
  • 前端文件下载方法封装
    1exportconstdownloadFileAxios=(fileUrl)=>{2axios({3url:fileUrl,4method:'GET',5responseType:'blob',6}).then((response)=>{7constcontentDisposition=respon......
  • 前端拿到后端返回文件流后页面生成excel表格预览(Luckysheet)
    最近项目遇到一个需求,就是本来只需要导出的excel文件,客户要求在前端页面进行预览查看。在查找资料后,决定使用Luckysheet来进行excel文件的预览。1.安装npmiluckyexcel2.html中引入相关js,css文件,可以自己下下来放到本地引入<linkrel='stylesheet'href='https://cdn.......
  • 前端系列16集-vue3范型,vue-i18n-next,watch,watchEffect
    中台落地手记——业务服务化与数据资产化vue-i18n-nextvue3中使用i18n需要安装的是 [vue-i18nv9] 的版本npminstallvue-i18n@9创建src\lang\index.ts,使用 createI18n 创建i18n实例://src\lang\index.tsimport{createI18n}from'vue-i18n'import{LANG_......
  • JetLinks前端配置
    JetLinks前端配置只需要修改vite.config.ts文件的这两个地方,config.ts文件不用修改: 图1:增加注释;图2:修改为jetlinks后端服务启动所在服务器的IP地址和端口号 备注:https://hanta.yuque.com/px7kg1/yfac2l/fwqriw24lp3cy2lwJetLinks-IOT是一个开源的、企业级的物联网平台,它......
  • 转!XML文件和DOM Document、String字符串三种类型之间的相互转换
    转自:https://www.cnblogs.com/fightingdeng1998/p/16047075.html用的包是org.w3c.dom.Document下的/***@Authordengzp*@Date2022/3/22*@Version1.0*@Description*/publicclassOperateXMLByDOM{/***将给定文件的内容或者给定URI的内容解析......
  • 前端
    v-deep(样式穿透)或者>>>的使用<stylelang="scss"scoped>.a{::v-deep.b{/*...*/}}</style>devExtreme中给按钮设置样式type设置成自定义名字,然后在样式中写自己的样式<template><DxButton...type="warning"/>&l......
  • 什么是前端开发领域的 visual degradation
    VisualDegradation在前端开发领域中,通常被理解为一种策略,这种策略允许网站或网络应用在不同的浏览器、设备或网络条件下以不同的视觉质量呈现,而不会丧失核心功能。这种策略可以确保所有用户,无论他们的设备或网络条件如何,都能够访问和使用网站或网络应用的主要功能。这并不意味......
  • 前端基础之BOM和DOM
    Js:js的三部分组成:ECMAScriptBOM(浏览器对象模型,就是js操作浏览器):大部分内容作为了解DOM(文档对象模型,js操作html文档、css样式等):需要熟练掌握window对象所有浏览器都支持window对象。它表示浏览器窗口。window对象常用方法:●window.innerHeight:浏览......
  • HTML认识前端
    前端什么是前端? 前端就是用户可以直接看得到的视图层就是前端什么是后端? 后端是和数据打交道的,在用户看不到的前端学习的内容"""前端三剑客"""HTML:一个网页的骨架,没有任何样式CSS:给一个网页添加样式,让其变得更加美观JavaScript:让网页有动效前端框架: jQuery、boo......