JavaScript DOM 基础知识总结

元素

获取页面元素

// 1. 通过id获取元素
document.getElementById('idStr')
// 2. 通过tag获取元素
document.getElementsByTagName('tagStr')
// 3. 通过name获取元素
document.getElementsByName('nameStr')
// 4. 通过class获取元素(H5新增)
document.getElementsByClassName('classStr')
// 5. 通过querySelector获取 返回第一个元素对象(H5新增)
document.querySelector('选择器')
// 6. 通过qurrySelectorAll获取(H5新增)
document.querySelectorAll('选择器')
// 7. 获取body元素
document.body
// 8. 获取html元素
document.documentElement

修改元素内容

// 1. innerText 不识别html标签 空格 换行
div.innerText = '<strong>123</strong>' // 输出 <strong>123</strong>
// 2. innerHtml 识别html标签 空格 换行
div.innerHtml = '<strong>123</strong>' // 输出 123(加粗)

修改元素属性

// 1. 直接获取并修改(内置属性)
element.属性 = '值'
// 2. 通过getAttribute方法获取(自定义属性)
element.getAttribute('属性')
// 3. 通过setAttribute方法修改(自定义属性)
element.setAttribute('属性','值')、
// 4. 移除属性
element.removeAttribute('属性')
// 5. H5自定义属性 date-index
element.dataset.index
element.dataset['index']
element.dataset['listName'] // 自定义属性中有多个-链接的单词,采用驼峰命名法

事件

注册事件

// 1. 传统注册方式
btn.onclick = funtion() {}
// 2. 方法监听注册方式
btn.addEventListener('click',function() {},[true/false]) // true为捕获阶段,false或空为冒泡阶段

删除事件

// 1. 传统注册方式 删除事件
btn.onclick = funtion() {
    div.onclick = null
}
// 2. 方法监听注册方式 删除事件
btn.addEventListener('click',fn)

function fn() {
    btn.removeEventListner('click',fn)
}

事件对象

btn.onclick = funtion(ev) {
    ev.target // 返回触发事件的对象
    ev.type // 返回事件的类型 比如click mouseover
    ev.preventDefault() // 阻止默认事件
    ev.stopPropagation() // 阻止冒泡
}

节点

父子节点

// 1. 父节点 parentNode
element.parentNode
// 2. 子节点 childNodes(获取所有节点 包含元素节点 文本节点等等) 不常用
element.childNodes
// 3. 子节点 chileren(获取所有的子元素节点) 常用
element.children
// 4. 第一个子节点(所有节点)
parentNode.firstChild
// 5. 第一个子元素节点
parentNode.firstElementChild
parentNode.chileren[0]  // 推荐
// 6. 最后一个子节点(所有节点)
parentNode.lastChild
// 7. 最后一个子元素节点
parentNode.lastElementChild
parentNode.children[parent.children.length - 1] // 推荐

兄弟节点

// 1. 下一个兄弟节点(所有节点)
node.nextSibling
// 2. 下一个兄弟元素节点
node.nextElementSibling
// 3. 上一个兄弟节点(所有节点)
node.previousSibling
// 4. 上一个兄弟元素节点
node.previousElementSibling

节点操作

// 1. 创建节点 createElement()
var li = document.createElement('li')
// 2. 添加节点(添加到最后面) node.appendChild(child)
ul.appendChild(li)
// 3. 添加节点(添加到指定元素的前面) node.insertBefore(child, 指定元素)
ul.insertBefore(li, ul.children[0]) // 插入到第一个
// 4. 删除节点 node.removeChild(child)
ul.removeChild(ul.children[0])
// 5. 复制节点 node.cloneNode() 参数为false或空 为浅拷贝 只复制标签 参数为true 为深拷贝
ul.children[0].cloneNode()