DOM 操作写法示例

选取元素

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

遍历元素

[].slice.call(document.querySelectorAll('a')).forEach(function(el, index){
  console.log( index + ": " + el.innerHTML );
})

创建元素

var newEl = document.createElement('div')

复制元素

el.cloneNode(true)

元素的末尾插入子元素

el.appendChild(newEl)

元素的开始插入子元素

el.insertBefore(newEl, el.firstChild)

当前元素前面插入元素

el.parentNode.insertBefore(newEl, el)

当前元素后面插入元素

el.parentNode.insertBefore(newEl, el.nextSibling)

删除元素

el.parentNode.removeChild(el)

判断两个元素是否相等

el === otherEl

表单元素

获取/设置值

document.querySelector('#my-input').value // 获取
document.querySelector('#my-input').value = 3 // 设置

单选/复选框选中状态

document.querySelector('input[type=checkbox]').checked
document.querySelector('input[type=checkbox]').checked = true

内容

el.textContent
el.textContent = 'xxx'
el.innerHTML
el.innerHTML = 'xxx'

属性

el.getAttribute('href')
el.setAttribute('href', 'xxx')
el.tagName

类名

el.classList.add(className)
el.classList.remove(className)
el.classList.contains(className) // hasClass

样式

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

el.style.color = '#ff0011'

尺寸

// 与 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;

事件

el.addEventListener('click', function(event){
  console.log(this.innerHTML)
})

参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React 深入说明JSX语法与Props特性

我们可以将JSX理解为React.createElement(component, props, ...children)方法的语法糖。JSX的代码:

11230
来自专栏柠檬先生

jquery 标签中的属性操作

.arrt() 获取匹配的元素集合中的第一个元素的属性值,或设置每一个元素中的一个或多个属性值。 .attr(attributeName) $("em"...

19870
来自专栏Golang语言社区

【Golang语言社区--基础篇】Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

385110
来自专栏九彩拼盘的叨叨叨

jQuery 写法示例

11720
来自专栏web前端-

Jquery的属性操作和DOM操作

       3 val()    :     获取或设置表单内容    (原生JS使用value)

10820
来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

368100
来自专栏Golang语言社区

GO-字符串常用操作

package main import ( "fmt" "strconv" "strings" ) func ma...

37970
来自专栏Golang语言社区

GO-字符串常用操作

package main import ( "fmt" "strconv" "strings" ) func ma...

35350
来自专栏前端知识分享

第87天:HTML5中新选择器querySelector的使用

1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回nu...

14530
来自专栏技术墨客

React学习(4)——深入说明JSX与props

我们可以将JSX理解为React.createElement(component, props, ...children)方法的语法糖。JSX的代码:

7520

扫码关注云+社区

领取腾讯云代金券