前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >DOM 操作写法示例

DOM 操作写法示例

作者头像
前端GoGoGo
发布2018-08-24 16:25:57
5360
发布2018-08-24 16:25:57
举报
文章被收录于专栏:九彩拼盘的叨叨叨

选取元素

代码语言:javascript
复制
document.querySelector('a') // 返回找到的第一个,不存在返回 null
document.querySelectorAll('a') // 返回所有,类型是 NodeList。不存在返回长度为 0 的 NodeList

遍历元素

代码语言:javascript
复制
[].slice.call(document.querySelectorAll('a')).forEach(function(el, index){
  console.log( index + ": " + el.innerHTML );
})

创建元素

代码语言:javascript
复制
var newEl = document.createElement('div')

复制元素

代码语言:javascript
复制
el.cloneNode(true)

元素的末尾插入子元素

代码语言:javascript
复制
el.appendChild(newEl)

元素的开始插入子元素

代码语言:javascript
复制
el.insertBefore(newEl, el.firstChild)

当前元素前面插入元素

代码语言:javascript
复制
el.parentNode.insertBefore(newEl, el)

当前元素后面插入元素

代码语言:javascript
复制
el.parentNode.insertBefore(newEl, el.nextSibling)

删除元素

代码语言:javascript
复制
el.parentNode.removeChild(el)

判断两个元素是否相等

代码语言:javascript
复制
el === otherEl

表单元素

获取/设置值

代码语言:javascript
复制
document.querySelector('#my-input').value // 获取
document.querySelector('#my-input').value = 3 // 设置

单选/复选框选中状态

代码语言:javascript
复制
document.querySelector('input[type=checkbox]').checked
document.querySelector('input[type=checkbox]').checked = true

内容

代码语言:javascript
复制
el.textContent
el.textContent = 'xxx'
el.innerHTML
el.innerHTML = 'xxx'

属性

代码语言:javascript
复制
el.getAttribute('href')
el.setAttribute('href', 'xxx')
el.tagName

类名

代码语言:javascript
复制
el.classList.add(className)
el.classList.remove(className)
el.classList.contains(className) // hasClass

样式

代码语言:javascript
复制
// 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题
var win = el.ownerDocument.defaultView;
// null 的意思是不返回伪类元素
win.getComputedStyle(el, null).color; // 获取元素的颜色

el.style.color = '#ff0011'

尺寸

代码语言:javascript
复制
// 与 jQuery 一致(一直为 content 区域的高度)
function getHeight(el) {
  const styles = this.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// 精确到整数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
el.clientHeight;
// 精确到小数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
el.getBoundingClientRect().height;

事件

代码语言:javascript
复制
el.addEventListener('click', function(event){
  console.log(this.innerHTML)
})

参考

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.12.01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 选取元素
  • 遍历元素
  • 创建元素
  • 复制元素
  • 元素的末尾插入子元素
  • 元素的开始插入子元素
  • 当前元素前面插入元素
  • 当前元素后面插入元素
  • 删除元素
  • 判断两个元素是否相等
  • 表单元素
    • 获取/设置值
    • 单选/复选框选中状态
    • 内容
    • 属性
    • 类名
    • 样式
    • 尺寸
    • 事件
    • 参考
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档