（day46）DOM、BOM、事件

目录

• 一、BOM
  • （一）定义
  • （二）window对象
  • （三）window的子对象
    • （1）navigator对象
    • （2）screen对象
    • （3）history对象
    • （4）location对象
    • （5）弹出框
    • （6）计时事件
• 二、DOM
  • （一）定义
  • （二）查找标签
    • （1）直接查找
    • （2）间接查找
  • （三）节点操作
    • （1）创建节点
    • （2）添加节点
    • （3）删除节点
    • （4）替换节点
    • （5）属性节点
    • （6）获取用户输入
    • （7）class的操作
    • （8）css属性操作
• 三、事件
  • （一）常用事件
  • （二）绑定方式
    • （1）行内绑定
    • （2）标签查找动态绑定

一、BOM

（一）定义

1. BOM：浏览器对象模型，可以和浏览器进行”对话“
2. 在调用window对象的方法和属性时，可以省略window对象的引用

（二）window对象

所有浏览器都支持对象，它表示浏览器窗口

1. window.innerHeight：浏览器窗口的内部高度
2. window.innerWidth：浏览器窗口的内部宽度
3. window.open()：打开新窗口
4. window.close()：关闭当前窗口

（三）window的子对象

（1）navigator对象

浏览器对象，通过这个对象可以判定用户使用的浏览器，包含了浏览器相关信息

1. navigator.appName：Web浏览器全称
2. navigator.appVersion：Web浏览器厂商和版本的详细字符串
3. navigator.userAgent：客户绝大部本信息
4. navigator.platform：浏览器所在操作系统

（2）screen对象

不常用

1. screen.availWidth：可用的屏幕宽度
2. screen.availHeight：可用的屏幕高度

（3）history对象

包含浏览器的历史，可以前进或者后退

1. history.fowward()：前进一页
2. history.back()：后退一页

（4）location对象

获得当前页面的地址（url），并且重定向

1. location.href：获取url
2. location.href = "URL"：跳转到指定页面
3. location.reload()：重新加载页面

（5）弹出框

1. 警告框alert

   点击确定才能继续操作

2. 确认框confirm

   点击确认返回true，点击取消返回false

3. 提示框prompt

   点击确认返回输入的值，点击取消返回null

（6）计时事件

1. setTimeout()

   过多长时间后再执行JS语句

   var t = setTimeout("JS语句/函数调用",毫秒)

2. clearTimeout

   取消setTimeout设置

   clearTimeout(t)

3. setInterval()

   按照指定的周期（毫秒计）循环调用函数或者JS语句

4. clearInterval()

   取消setInterval()设置的循环调用

二、DOM

（一）定义

• DOM是页面的文档对象模型，通过它，可以访问HTML文档的所有元素。

• DOM标准规定html文档的每个成分都是一个节点
  1. 文档节点（document对象）：代表整个文档
  2. 元素节点（element对象）：代表一个元素（标签）
  3. 文本节点（text对象）：代表元素中的文本
  4. 属性节点（attribute对象）：代表一个属性，元素才有属性
  5. 注释是注释节点（comment对象）
• 可以创建动态的html
  1. 改变页面中的所有html元素
  2. 改变页面中的所有html属性
  3. 改变页面中的所有css样式
  4. 对页面中的所有事件做出反应

（二）查找标签

（1）直接查找

1. document.getElementById：根据ID获取一个标签
2. document.getElementsByClassName：根据class名获取包含改标签的数组
3. document.getElementsByTagName：根据标签名获取所有标签的数组

（2）间接查找

1. parentElement：父节点标签
2. children：所有子标签（数组）
3. firstElementChild：第一个子标签
4. lastElementChild：最后一个子标签
5. nextElementSibling：下一个兄弟标签
6. previousElementSibling：上一个兄弟标签

（三）节点操作

（1）创建节点

document.createElement("标签名")

// 语法
createElement(标签名)

// 示例
var divEle = document.createElement("div");

// 增加属性方法1
divEle.setAttribute("id","d1")

//增加属性方法2,该方法无法增加自定义属性
divEle.id = "d1"

（2）添加节点

1. somenode.appendChild(newnode)：最佳一个子节点（作为最后的子节点）
2. somenode.insertBefore(newnode, 某个节点)：在某个子节点前面增加节点

var imgEle = document.createElement("img");

imgEle.setAttribute("src","https://images.cnblogs.com/cnblogs_com/wick2019/1592198/t_191116084835%E7%BA%B9%E9%BE%99%E5%B0%91%E5%A5%B3.png?a=1574073646113");

var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

（3）删除节点

somenode.removeChild(要删除的节点)：通过父元素调用该方法删除

（4）替换节点

somenode.replaceChild(newnode,某个节点)

（5）属性节点

1. innerText：获取标签内文本

2. innerHTML：获取标签html代码，包括文本

3. getAttribute("属性名")：获取属性值

4. setAttribute("属性名"，“属性值”)：设置属性值，可以添加自定义属性

5. 标签对象.属性：获取和设置属性，不可以设置自定义属性

6. removeAttribute("属性名")：移除属性

   var divEle = document.getElementById("d1");
   
   divEle.innerText  // 获取文本
   divEle.innerHTML  // 获取html代码，包括文本
   
   divEle.innerText = "1"
   divEle.innerHTML = "<p>2</p>" 
   
   divEle.setAttribute("age","18")
   divEle.getAttribute("age")
   divEle.removeAttribute("age")

（6）获取用户输入

标签对象.value：适用于input/select/textarea标签

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

（7）class的操作

1. className：获取所有样式类名
2. classList.remove(cls)：删除指定类
3. classList.add(cls)：添加类
4. classList.contains(cls)：存在返回true，否则返回false
5. classList.toggle(cls)：切换，存在就删除，否则添加

（8）css属性操作

// 语法
obj.style.属性名

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

// 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

三、事件

HTML事件触发浏览器中的动作（action）

（一）常用事件

1. onclick：当用户点击某个对象时调用的事件句柄
2. onblclick：当用户双击某个对象时调用的事件句柄
3. onfocus：元素获得焦点
4. onblur：元素失去焦点
5. onchange：域的内容被改变，比如select下拉选择标签
6. onkeydown：某个键盘按键被按下
7. onkeypress：某个键盘按键被按下并松开
8. onkeyup：某个按键被松开
9. onload：页面或图像完成加载
10. onmousedown：鼠标按钮被按下
11. onmousemove：鼠标被移动
12. onmouseout：鼠标从某元素移开
13. onmouseover：鼠标移到某元素之上
14. onselect：在文本框中的文本被选中时发生
15. onsubmit：确认按钮被点击，使用的对象是form

（二）绑定方式

（1）行内绑定

this是实参，表示触发事件的当前元素

函数定义过程中的ths是形参

<div id="d1" onclick="changeColor(this);">点我</div>

<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

（2）标签查找动态绑定

<div id="d2">点我</div>

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