DOM

1.获取元素类名

• 获取语法: 元素.className
• 设置语法: 元素.calssName = '新的类名'
• 第二种获取语法 : 元素.classList
• 第二种设置语法: 元素.classList.add('新增类名')
• 删除语法: 元素.classList.remove('删除的类名')

2.获取元素样式

• 语法: 元素.style.某个css属性 (只能获取到行内样式)

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'

3.获取DOM子节点

• 语法: 元素.children (获取元素的所有子级元素节点==只能获取到标签)
• 语法: 元素.childNodes (获取元素的所有子级元素节点==获取到标签以及文本)
• 注意点: 获取的文本是换行

4.获取DOM第一个子节点

• 语法: 元素.firstChild 获取的是内部第一个子节点(不一定是子元素的节点)
• 语法: 元素.firstElementChild 获取的是内部第一个子元素节点
• 注意点: 获取的文本是换行

5.获取DOM最后一个子节点

• 语法: 元素.lastChild
• 语法: 元素.lastElementChild
• 文本节点:获取最后一个子节点, 也就是 span结束标签, 到div结束标签前的一个换行, 这里会被识别为 text

6.获取兄弟节点

• 语法: 元素.nextSibling 获取下一个兄弟节点:text
• 语法: 元素.nextElementSibling 获取下一个兄弟元素节点:
• 语法: 元素.previousSibling 获取上一个兄弟节点:text
• 语法: 元素.previousElementSibling 获取上一个兄弟节点:

7.获取父级节点

• 语法: 元素.parentNode

8.获取节点分类

1. 元素节点: 元素.firstElementChild

   var ele = oUl.firstElementChild
   console.log(ele)

2.元素节点 :元素.firstChild

  var text = oUl.firstChild
  console.log(text)

3.属性节点: 元素.arrtributes[0]

 var attr = oUl.attributes[0]
 console.log(attr)

4.nodeType 节点类型

• 语法: 元素.firstElementChild.nodeType
• 语法: 元素.firstChild.nodeType
• 语法: 元素.attributes.nodeType

        console.log(ele.nodeType)   // 元素节点 打印 1
        console.log(text.nodeType)  // 文本节点 打印 3
        console.log(attr.nodeType)   // 属性节点 打印 2

5.nodeName 节点名称

• 语法: 元素.firstElementChild.nodeName
• 语法: 元素.firstChild.nodeName
• 语法: 元素.attributes.nodeName

       console.log(ele.nodeName)   // 元素节点节点名称  大写的 LI
        console.log(text.nodeName)  // 文本节点名称 #text
        console.log(attr.nodeName)  // 属性节点名称就是 属性名

6.nodeValue 节点的值

• 语法: 元素.firstElementChild.nodeValue
• 语法: 元素.firstChild.nodeValue
• 语法: 元素.attributes.nodeValue

        console.log(ele.nodeValue)  // 元素节点 是没有 nodeValue
        console.log(text.nodeValue) // 文本节点 是  实际的文本的值
        console.log(attr.nodeValue) // 属性节点 是  实际的 属性值