JS中BOM与DOM操作

时间：2022-12-06 22:05:01

目录

BOM操作

window对象

是与浏览器窗口做交互的语言

BOM = Browser Object Model 是指浏览器对象模型，它可以使Javascript 有能力和浏览器进行对话

window.open()
//打开一个新的窗口
window.open('https://www.baidu.com/','','width=300px,left=200px')
//打开的网址 以及新窗口的高度 宽度 都可以设置

window.close()
//关闭当前窗口

navigator.userAgent
//标识自己是一个浏览器

history.forward()
//浏览器前进一页
history.back()
//浏览器退回上一页
window.location.reload()
//重新加载当前页

window.location.href
//获取当前网页网址
location.href="URL" 
// 跳转到指定页面

浏览器弹窗

1.警告框  
  alert('文本消息')
  //自带确认按钮 需要点击确认弹窗消失
  警告框经常用于确保用户可以得到某些信息,当警告框出现后，用户需要点击确定按钮才能继续进行操作。

2.确认框
  confirm('文本消息')
  //当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
  let l1 = confirm('你愿意吗？')
  console.log(l1)//true

3.提示框
  prompt('1+1=？')
  //出现提醒消息，并用户可以输入消息 可以用变量接受消息
  // 点击取消等 null

计时相关

通过js代码我们可以设定在一段时间间隔之后来执行代码，而不是

调用函数后立刻执行，我们称之为定时任务

设定定时任务
let time1 = setTimeout('js代码',毫秒)
//设定定时任务
setTimeout()方法会粗储存在变量 time1中
js代码 = 任何js代码或者函数
毫秒 = 从执行开始后的多少毫秒倒计时开始执行1秒=1000毫秒

取消定时任务
clearTimeout(time1)
//立即取消这个任务

设定循环任务
let time2 = setInterval('func',3000)
//每个3000毫秒执行一次

取消循环任务
clearInterval(time2)
//立即取消这个任务


小练习

function showtime(){
  alert('你还好吗？')
}

setTimeout(showtime,3000)
//3000毫秒后启动 showtime函数 只启动一次

setInterval(showtime,3000)
//无限启动 每 3000毫秒一次

如果需要关闭循环任务

let time2 = setInterval(showtime,3000)
clearInterval(time2)
需要变量接受然后关闭

DOM操作

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

DOM操作就是通过js代码来操作标签.

DOM-查找标签

/*
  1.JS中变量名的命名风格推荐是驼峰体
  2.js代码中如果需要反复用一个标签，可以使用变量来接受 规律是 XXXEle 
  */

1.document.getElementById('ID')
通过id来查找标签 结果就是标签本身

2.document.getElementByClassName('classname')[0]
通过类名来查询标签 返回一个数组，里面的每一个标签可以通过索引取值到具体标签

3.document.getElementByTagName('span')[0]
通过标签名来查询标签 返回一个数组 可以通过索引取值到具体标签


4.divEle = document.getElementById('d1')
  获取标签本身
  divEle.firstElementChild
  通过标签获取标签内第一个子标签元素
  
5.divEle.nextElementSibling
  通过标签获得同级别的下一个标签
  
6.divEle.previousElementSibling
  通过标签获得同级别的上一个标签
  
7.divEle.parentElement
  通过标签获得它的父级标签

操作标签

语法：document.createElement('标签名')

let divEle = document.createElement('div')

let aEle = document.createElement('a')

给创建的标签添加属性

let aEle = document.createElement('a')
aEle.href = 'http://www.baidu.com'
可以直接通过.的方法只能够添加标签的默认属性 id class 等

aELe.setAttribute('属性名','属性值')
推荐使用这种方式添加 可以操作默认的和自定义的都可以


aEle.innerText = '新的文本内容'
可以对标签设置文本，会自动替换之前的所有文本


aEle.innerText
获取标签内的文本内容


divEle.appendChild(aEle)
将代码创建的标签插入到一个标签内，这样才生效有显示作用

divEle.removeChild(aEle)
通过父元素调用该方法删除标签

.innerHTML			
获取标签内部所有的HTML标签加文本
.innerHTML = "<p>2</p>"
也可以重新设置标签


divEle.getAttribute("age")
获取标签的某个属性值

获取值操作

1.针对input 让用户输入的和用户选择的标签
  先查找到获取用户数据的标签
  let inputEle = document.getElementById('ID')
标签对象.value
//直接获取标签的值
inputEle.value
//就可以拿到了用户输入的数据

2.针对用户单选的操作
  首先查找到用户选择的标签
  let selectEle = document.getElementById('ID')
  selectEle.value
  //可以拿到用户选择的值

3.针对用户上传文件操作 获取用户上传的文件
  let fileEle = document.getElementById('ID')
  fileEle.files
  //可以拿到用户上传的文件列表
  fileEle.files[0]
  //可以拿到真正的文件对象

标签CSS/Class样式操作

Class样式操作 首先利用查找标签 先拿到要操作的标签本身

divEle = document.getElementById('ID')

divEle.className
获取该标签内所有的 class类名

divEle.remove('class名称')  
删除指定类

divEle.add('class名称')  
添加一个样式类

divEle.contains('class名称')  
判断该样式名是否存在 存在返回true，否则返回false

divEle.toggle('class名称') 
存在就删除，否则添加

css操作

divEle = document.getElementById('ID')

都需要先生成标签对象本身

通过js代码去改变css样式

语法结构：

标签对象.style.要改变的属性 = '属性值'

divEle.style.backgroundColor="red"
//通过标签对象修改 背景颜色样式

divEle.style.width ='100px'
//通过标签对象修改 背景颜色样式

divEle.style.left ='100px'
//通过标签对象修改 背景颜色样式

事件

有能力使 HTML 事件触发浏览器中的动作（action）

当用户点击某个 HTML 元素时启动一段 JavaScript

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

onfocus        元素获得焦点。 
//输入框选中事件
onblur         元素失去焦点。   
//输入框离开事件
onchange       域的内容被改变。  
//选择框的内容被改变时

onkeydown      某个键盘按键被按下。         
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
//鼠标移入发送的事件

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

如何绑定事件

方式一：
直接在标签内部定义事件
 
<p onclick='function()'>快来点我</p>
<!--对该标签绑定了一个点击事件 点击此标签后 触发 function函数-->


方式二：
使用标签对象进行绑定事件
let inputNameEle = document.getElemenById('id')
/*通过id查找到标签*/

inputNameEle.onfocus = function(){
  this.value = ''
}
//this自己本身的意思
//对这个对象 添加 获得焦点事件 获得焦点后触发 将自身的值改为 空

事件实操

判断账号密码输入

<p>name:
    <input type="text" >
    <span style="color: red">11</span>
</p>

<p>password:
    <input type="text" >
    <span style="color: red">11</span>
</p>

<button >登录</button>

<script>
    let buttonEle = document.getElementById('subtn')
    //找到这个登录这个按钮
    buttonEle.onclick = function () {
      //按钮绑定一个 单击事件 单击时运行
        let nameEle = document.getElementById('name')
        let passwordEle = document.getElementById('password')
        if (nameEle.value == '123') {
          //判断name对象的值是否是123
            nameEle.nextElementSibling.innerText = '账号不能123';       //如果是 则把name对象的下一个标记内添加内容
            if (passwordEle.value == '123') {
                passwordEle.nextElementSibling.innerText = '密码不能123';}
        }
    }

相关文章