JavaScript-DOM入门基础知识

目录

一：什么是DOM

二：事件三要素

三：执行时间的步骤

常见的鼠标事件

四：操作元素

五：节点操作

一：什么是DOM

DOM是document object model 文档对象模型，提供了很多对标签进行增删改查的操作。

二：事件三要素

事件源、事件类型、事件处理程序

(1):事件源：事件被触发的对象，谁被触发，谁被点击。

var btn = document.getElementById('btn');

(2):事件类型：如何触发 什么事件

(3):事件处理程序：通过一个函数赋值的方式

三：执行时间的步骤

1.获取事件源。

2.注册事件(绑定事件)

3.添加事件的处理程序（采用函数赋值的形式）

常见的鼠标事件

onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

四：操作元素

利用dom操作元素来改变元素里的内容 属性。

4.1改变元素内容

element.innerText

从起始位置到终止位置的内容，但他去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的内容，包括HTML标签，同时保留空格和换行

4.2

disabled：某个表单被禁用，不能再被点击

btn.disabled = true; 或 this.disabled = true;

五：节点操作

1.父级节点

node.parentNode

<div class="box">
      <span class="erweima">X<span>
</div>
<script>
     var erweima = document.querySeletor(".erweima");
     console.log(erweima.parentNode);  //得到的是离元素最近的父级节点
</script>

2.子级节点

parentNode.childNodes(得到的是一个集合)

parentNode.children是一个只读属性。返回的是所有子元素节点。他只返回子元素节点，其余节点不返回。

3.第一个子节点和最后一个子元素

<ol>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
  <li>li4</li>
</ol>
<script>
   var ol = document.querySelector('ol');
   //firstChild第一个子节点，不管是文本节点还是元素节点
   console.log(ol.firstChild);
   console.log(ol.lastChild);
   //firstElementChild返回的是第一个子元素节点
   console.log(ol.firstElementChild);
   console.log(ol.lastElementChild);
   console.log(ol.children[0]);
   console.log(ol.children[3]);
</script>

4.兄弟节点

nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null，包含所有节点

5.创建节点

document.createElement('tagName')

添加节点

node.appendChild（child）  将节点添加到指定元素的末尾  node父级  child子级

node.insertBefore（child，指定元素） 将一个节点添加到父节点的指定节点前面

6.指定节点

node.removeChild(child) 从DOM中删除一个子节点返回删除节点

7.复制节点

node.clone Node()