DOM相关

获取元素类名
1. 获取语法元素.className console.log(oDiv.className)
2. 设置语法元素.className = '新的类名' oDiv.className = oDiv.className + ' new_box'
3. 第二种获取语法 console.log(oDiv.classList)
4. 第二种设置语法 oDiv.classList.add('new_box')
5. 删除语法 oDiv.classList.remove('box')

获取元素样式

*  语法: 元素.style.某个CSS属性            ----> 只能获取到行内样式
  */
  var oBox = document.getElementsByClassName('box')[0]

  // 1. 获取元素样式
  console.log(oBox.style.width)
  console.log(oBox.style.height)
  // console.log(oBox.style.background-color) // 错误写法
  console.log(oBox.style['background-color']) // 中括号语法
  console.log(oBox.style.backgroundColor) // 驼峰命名

  // 2. 设置元素样式          ---> 只能设置给行内
  oBox.style.backgroundColor = 'blue'

  /**
   *  获取元素样式 (非行内)    注意: 这种方式获取到的 是 只读的属性
   *          只读: 只能获取到, 但是不允许修改
  */
  console.log(window.getComputedStyle(oBox).width)
  console.log(window.getComputedStyle(oBox).backgroundColor)
  window.getComputedStyle(oBox).width = 800 + 'px'

DOM 节点

元素节点

  html文件:
  <div class="box">
    <p>哈哈哈</p>
    <span>yyyyyyyyyy</span>
  </div>
  <div id="box1"></div>
  
获取元素的子节点:
  var oDiv = document.querySelector('div')
  console.log(oDiv.children) 
  console.log(oDiv.childNodes)

获取元素的第一个子节点

  html文件:
  	<div>
  <p>hhhh</p>
  <span>xxxxx</span>
  </div>

获取元素的子节点:
  var oDiv = document.getElementsByTagName('div')[0]
  console.log(oDiv.firstChild) // 获取的是 元素内部 第一个 子节点 (不一定是 子元素节点)
  console.log(oDiv.firstElementChild)  // 获取的是 元素内部 第一个 子 元素 节点

获取元素的第一个子节点

获取元素最后一个子节点
 var oDiv = document.querySelector('div')
 console.log(oDiv.lastChild)  
获取最后一个子节点, 也就是 span结束标签, 到div结束标签前的一个换行, 这里会被识别为 text
 console.log(oDiv.lastElementChild)  // 获取最后一个子元素节点 ---> span

获取兄弟节点

  <ul>
     <li id="a">1</li>
     <li id="b">2</li>
     <li id="c">3</li>
  </ul>
  // 获取兄弟节点
  var oli = document.getElementById('b')
  // console.log(oli)

  // 获取下一个兄弟节点
  console.log(oli.nextSibling)    // 获取下一个兄弟节点   ---> #text
  // 获取下一个兄弟元素节点
  console.log(oli.nextElementSibling) // 获取下一个兄弟元素节点  ---> <li id="c"></li>

  // 获取上一个兄弟节点
  console.log(oli.previousSibling)    // 获取上一个兄弟节点 ---> #text
  // 获取上一个兄弟元素节点
  console.log(oli.previousElementSibling) // 获取上一个兄弟元素节点 <li id="a"></li>

获取父节点

  // 获取元素的 父级节点
  var oli = document.getElementById('b')
  console.log(oli)
  console.log(oli.parentNode)

获取节点

childNodes: 获取某一节点下所有的子一级节点
children: 获取某一节点下所有的子一级 元素节点
firstChild: 获取某一节点下子一级的 第一个节点
lastChild: 获取某一节点下子一级的 最后一个节点
firstElementChild: 获取某一节点下子一级的 第一个元素节点
lastElementChild: 获取某一节点下子一级的 最后一个元素节点
nextSibling: 获取某一个节点的 下一个兄弟节点
previousSibling: 获取某一个节点的 上一个兄弟节点
nextElementSibling 获取某一个节点的 下一个元素节点
previousElementSibling 获取某一个节点的 上一个元素节点
parentNode: 获取某一个节点的 父节点
attributes: 获取某一个 元素节点 的所有 属性节点

DOM获取元素相关操作

DOM相关

DOM 节点

获取节点