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})
素颜马尾好姑娘i
迷南。
怼烎@
还没有评论，来说两句吧...