JS基础语法（二）

​开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第五天，点击查看活动详情

DOM

1.概述

• DOM指document object model，即文档对象模型

• 将HTML文档各个组成部分封装为对象，借助这些对象可以对HTML文档进行增删改查的动态操作

• 相关对象：

  0. Document，表示文档对象
  1. Element，元素对象
  2. Attribute，属性对象
  3. Text，文本对象

2.元素对象的操作

• 根据document文档对象来获取元素对象

  方法	说明
  getElementById(id属性值)	根据id属性获取元素对象
  getElementsByTagName(标签名)	根据标签名获取元素对象
  getElementsByName(name属性值)	根据name属性获取元素对象
  getElementsByClassName(class属性值)	根据class属性获取元素对象

• 根据当前元素对象获取父元素对象

  子元素对象.parentElement

• 通过文档对象创建新元素对象

  document.createElement(标签名);

• 将指定子元素对象添加到父元素中

  父元素对象.appendChild(子元素对象);

• 父元素删除指定的子元素

  父元素对象.removeChild(子元素对象);

• 父元素用新子元素替换旧子元素

  父元素对象.replace(新元素,旧元素);

3.元素内属性操作

• 给元素设置属性

  setAttribute(属性名,属性值);

• 根据属性名获取属性值

  getAttribute(属性名);

• 根据属性名移除属性

  removeAttribute(属性名);

• 为元素添加样式

  方式一：

  元素对象.style.样式=值;

  如：

  let ele = document.getElementById("a");
  ele.style.color = "red";
  

  方式二：

  元素对象.className = "类选择器名";

4.元素内文本操作

• 设置文本内容，不解析标签

  元素对象.innerText="文本内容";

  注意：不解析标签是指文本内容如果有HTML标签也不会解析，只会当成文本

• 设置文本内容，解析标签

  元素对象.innerHTML="文本内容";

  注意：这里的文本内容会被解析标签

事件

• 事件是某些组件完成某些操作时会触发的代码

• 常用事件

  事件	说明
  onload	某个页面或图像被加载完成
  onsubmit	表单提交时
  onclick	鼠标点击事件
  ondblclick	鼠标双击
  onblur	元素失去焦点
  onfocus	元素获得焦点
  onchange	用于改变域的内容

• 绑定事件的方式

  0. 通过标签中事件属性进行绑定

     范例：

     <button onclick="触发的操作"></button>
     

  1. 通过DOM元素进行绑定

     let b = document.getElementById("btn");
     b.onclick=function(){//使用匿名方法
         触发的操作;
     }