DOM、BOM和事件

JavaScript

---

DOM

DOM  -  document object mode(文档对象模型)
js中自带一个对象叫document，这个对象指向整个网页内容部分
document常用方法:
  1) 操作标签  -  标签的增删改查
    查 - 获取标签(节点)
     直接获取标签
      document.getElementById(id值) - 获取指定id对应的标签,返回一个标签对象
      document.getElementsByClassName(class值) - 获取class值是指定值的标签,返回一个容器
      document.getElementsByName(name值) - 获取name值是指定值的标签,返回一个容器
      document.getElementsByTagName(标签名) - 获取标签名是指定值的标签,返回一个容器
     间接获取标签
      获取子标签:
       获取所有的子节点: 标签对象.children - 返回一个容器由多个标签对象组成
       获取第一个子节点: 父节点.firstElementChild
       获取最后一个子节点: 父节点.lastElementChild
      获取父标签:标签对象.parentElementchildren - 返回一个标签对象
      获取兄弟标签:标签对象.nextElementSibling - 返回一个容器
    创建和添加(节点)标签
     创建节点(标签):document.createElement(标签名)
     添加节点(标签):
      父节点.appendChild(标签) - 添加到父节点(标签)里面的最后
      父节点.insertBefore(标签,节点1) - 添加到父节点(标签)里面节点1的前面
    删除(节点)标签
     节点(标签).remove()
     父节点.removeChild(子节点)
    拷贝(节点)标签
     节点.cloneNode()
     节点.cloneNode(true)
    替换(节点)标签
     父节点.replaceChild(新节点, 子节点)
     
  2) 操作标签内容
    获取标签(节点)内容
     节点.innerText
     节点.innerHTML
    标签属性
     一般属性操作:节点.属性名=属性值
     样式属性:
      操作单个属性:节点.style.属性名=属性值(js取消了属性名中的"-“改为”-"后的首字母大写)
      操作该节点的所有属性:节点.style=样式

---

---

BOM

BOM(browser object mode) - 浏览器对象模型
js中自带一个window，指向浏览器。在js代码中定义的所有的全局变量都是添加到window对象中的属性
一般情况下，使用window中的属性和方法的时候, window可以省略
1.window基本操作
  打开新窗口：
    window.open(网页地址)
    window.open(‘网页地址’,’’,‘width=宽度,height=高度’)
  关闭窗口: window.close() /窗口对象.close()
  移动当前窗口: 窗口对象.moveTo(x坐标, y坐标)
  获取浏览器的宽度和高度: window.innerWidth, window.innerHeight / window.outerWidth, window.outerHeight
2.弹框
  alert(提示信息) - 弹出提示信息(带确定按钮)
  confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值，取消-false, 确定-true
  prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消，确定按钮的提示框; 点取消，返回值是null;点确定返回值是输入框中输入的内容
3.定时
  间隔指定时间重复执行指定操作
   setInterval(操作,时间间隔) - 操作是函数,时间间隔的单位是毫秒
   关闭计时器:clearInterval(定时对象)
  到了指定时间只操作一次
   setTimeout(操作,时间间隔) - 操作是函数,时间间隔的单位是毫秒
   关闭计时器:clearTimeout(定时对象)

---

---

事件

1.事件绑定
  a. 在标签内部给事件源的事件属性赋值
  b. 通过节点绑定事件1: 标签节点.事件属性 = 函数
  c. 通过节点绑定事件2: 标签节点.事件属性 = 匿名函数
  d. 通过节点绑定事件3: 节点.addEventListener(事件名,函数)
   事件名 - 必须去掉on
2.常见事件类型
  a…onload - 页面加载完成对应的事件(标签加载成功)
  b.鼠标事件:
   onclick(鼠标单击)
   onmouseover(鼠标在标签上)
   onmouseout(鼠标离开标签)
  c.键盘事件:
   onkeypress
   onkeydown(按下键盘按键)
   onkeyup
  输入框输入状态结束:onchange
3.事件捕获
  事件对象.stopPropagation()

---

---

js读取json文件

$.get("js/user.json",function(res){
		console.log(res);
		})

要使用$.get必须先导入jquery

<script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script>