码迷,mamicode.com
首页 > 其他好文 > 详细

DOM节点操作

时间:2019-04-06 16:50:58      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:创建   pen   log   操作   attr   code   containe   app   setattr   

获取 DOM 节点:

var div1 = document.getElementById('div1') // 元素
var divList = document.getElementsByTagName('div')  // 集合
console.log(divList.length)
console.log(divList[0])

var containerList = document.getElementsByClassName('.container') // 集合
var pList = document.querySelectorAll('p') // 集合

prototype:

DOM 节点就是一个 JS 对象,它符合之前讲述的对象的特征 ———— 可扩展属性

var pList = document.querySelectorAll('p')
var p = pList[0]
console.log(p.style.width)  // 获取样式
p.style.width = '100px'  // 修改样式
console.log(p.className)  // 获取 class
p.className = 'p1'  // 修改 class

// 获取 nodeName 和 nodeType
console.log(p.nodeName)
console.log(p.nodeType)

Attribute:

property 的获取和修改,是直接改变 JS 对象,而 Attibute 是直接改变 html 的属性。两种有很大的区别

var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name', 'imooc')
p.getAttribute('style')
p.setAttribute('style', 'font-size:30px;')

DOM 树操作

  • 新增节点
var div1 = document.getElementById('div1')
// 添加新节点
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1) // 添加新创建的元素
// 移动已有节点
var p2 = document.getElementById('p2')
div1.appendChild(p2)
  • 获取父元素
var div1 = document.getElementById('div1')
var parent = div1.parentElement
  • 获取子元素
var div1 = document.getElementById('div1')
var child = div1.childNodes
  • 删除节点
var div1 = document.getElementById('div1')
var child = div1.childNodes
div1.removeChild(child[0])

DOM节点操作

标签:创建   pen   log   操作   attr   code   containe   app   setattr   

原文地址:https://www.cnblogs.com/mushitianya/p/10661972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!