DOM核心操作

前言

  JavaScript主要是由三部分组成：ECMAScript、DOM、BOM，今天我们一起来学习一下JS中DOM的核心操作吧。

是什么

  DOM即Document Object Model（文档对象模型），可以使用JS来操作HTML。

创建元素

  方式一：document.write

  创建方式：

document.write('我是后来的<p>我是更后的</p>')

  最终效果：
  

  方式二：innerHTML

  创建方式：

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>'

  最终效果：
  

  方式三：createElement

  创建方式：

var div = document.createElement('div');
document.body.appendChild(div)

  最终效果：
  

  三种方式区分：

document.write：如果实在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的内容就都被干掉了
innerHTML：采取数组形式拼接的时候，效率更高，但是结构稍微复杂
createElement：创建多个元素效率稍微低一点，但是结构更为清晰

操作元素

  一、增

  1.appendChild

node.appendChild(child)  // 后面追加元素

  2.insertBefore

node.insertBefore(child, 指定元素)  // 在执行元素之前插

  代码示例：

  二、删

node.removeChild(child)   // 移除指定元素

  代码示例：

  三、改

  1.修改元素属性：src、href、title

img.src = 'openEye.png'

  2.修改普通元素内容：innerHTML、innerText

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>'

  3.修改表单样式：value、type、disabled

li.innerHTML = text.value;
input.type = 'password'
btn.disable = true

  4.修改元素样式：style、className

img.style.display = 'none'
img.className=' '    // 在CSS中定义的类名

  四、查

  1.DOM提供的API：getElementById、getElementsByTagName

<div id='box'></div>
var box = document.getElementById('box');
var box2 = document.getElementsByTagName('div')

  2.H5提供的新方法：querySelector、querySelectorAll

var ul = document.querySelector('ul');
var li = document.querySelectorAll('li')

  3.利用节点操作获取元素：parentNode、children、previousElementSibling、nextElementSibling

parentNode：返回的是离元素最近的父级节点 如果找不到就返回null
children：获取所有的子元素节点
previousElementSibling：上一个兄弟元素节点
nextElementSibling：下一个兄弟元素节点

自定义属性操作

  1.setAttribute

设置自定义属性：setAttribute(“属性的名字”,“属性的值”);

  2.getAttribute

获取自定义属性的值：getAttribute(“属性的名字”);

  3.removeAttribute

移除自定义属性：removeAttribute(“属性的名字”);

事件操作

  1.事件源.事件类型 = 事件处理程序

btn.onclick = function() {
	// do something
}

  2.addEventListener

document.addEventListener('click ', function() {
    // do something
})