前言
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
})