获取元素类名
<div class="item box">我是一个具有两个类名的 DIV</div>
<script>
/**
* 获取元素类名
*/
var oDiv = document.querySelector('div')
// 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')
</script>
获取元素样式
<div class="box"> 我是一个具有样式的div </div>
<!-- <div class="box" style="width: 500px; height: 600px"> 我是一个具有样式的div </div> -->
<script>
/**
* 获取元素样式
*
* 语法: 元素.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'
</script>
获取DOM子节点
<div class="box">
<p>哈哈哈</p>
<span>yyyyyyyyyy</span>
</div>
<div id="box1"></div>
<script>
// 1. 获取元素的子节点
var oDiv = document.querySelector('div')
console.log(oDiv.children) // 获取元素的所有 子级元素节点(只能获取到标签)
console.log(oDiv.childNodes)
/**
* oDiv.childNodes: ---> NodeList(5) [text, p, text, span, text]
*
* 获取所有的 子级节点(会把换行识别为一个文本, 标签当成 元素节点)
* div 结束标签的位置开始, 到p标签开始位置的换行会被识别为一个 text
* p 标签会被识别为一个 元素节点
* p 结束标签到 span 开始标签前 的换行 会被识别为一个 text
* span 标签会被是被识别为一个 元素节点
* span 标签结束位置到 div 结束标签前 的换行 会被识别为一个 text
*/
</script>
获取元素第一个子节点
<div>
<p>hhhh</p>
<span>xxxxx</span>
</div>
<script>
/**
* 获取元素的 第一个 子节点
*/
var oDiv = document.getElementsByTagName('div')[0]
console.log(oDiv.firstChild) // 获取的是 元素内部 第一个 子节点 (不一定是 子元素节点)
/**
* 获取到 div 节点内的第一个子节点
* 注意此时并不是获取到了第一个元素节点,
* 而是 div 开始标签后到p开始标签前的一段换行, 这一段被识别为 text(文本节点)
*
* 除非你的 HTML 结构 不写换行
*/
console.log(oDiv.firstElementChild) // 获取的是 元素内部 第一个 子 元素 节点
</script>
获取元素最后一个子节点
<div>
<p>hhhh</p>
<span>xxxxx</span>
</div>
<script>
/**
* 获取元素最后一个子节点
*/
var oDiv = document.querySelector('div')
console.log(oDiv.lastChild)
/**
* text
* 获取最后一个子节点, 也就是 span结束标签, 到div结束标签前的一个换行, 这里会被识别为 text
*/
console.log(oDiv.lastElementChild) // 获取最后一个子元素节点 ---> span
</script>
获取兄弟节点
<ul>
<li id="a">1</li>
<li id="b">2</li>
<li id="c">3</li>
</ul>
<script>
// 获取兄弟节点
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>
</script>
获取父级节点
<div>
<ul>
<li id="a">1</li>
<li id="b">2</li>
<li id="c">3</li>
</ul>
</div>
<script>
// 获取元素的 父级节点
var oli = document.getElementById('b')
console.log(oli)
console.log(oli.parentNode)
/**
* 获取到元素的 父级节点
*/
</script>
节点分类
<ul x="100" y="200">
<li>我是ul的子级</li>
</ul>
<script>
// 节点分类
var oUl = document.querySelector('ul')
// 1. 元素节点
var ele = oUl.firstElementChild
// console.log(ele)
// 2. 文本节点
var text = oUl.firstChild
// console.log(text)
// 3. 属性节点
var attr = oUl.attributes[0]
// console.log(attr)
/**
* nodeType 节点类型
*/
console.log(ele.nodeType) // 元素节点 打印 1
console.log(text.nodeType) // 文本节点 打印 3
console.log(attr.nodeType) // 属性节点 打印 2
/**
* nodeName 节点名称
*/
console.log(ele.nodeName) // 元素节点节点名称 大写的 LI
console.log(text.nodeName) // 文本节点名称 #text
console.log(attr.nodeName) // 属性节点名称就是 属性名
/**
* nodeValue 节点的值
*/
console.log(ele.nodeValue) // 元素节点 是没有 nodeValue
console.log(text.nodeValue) // 文本节点 是 实际的文本的值
console.log(attr.nodeValue) // 属性节点 是 实际的 属性值
</script>
操作DOM
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
/**
* 操作 DOM
* 常规意义上的 操作DOM, 就是增删改查
*
* 1. 创建 (创建完成之后, 页面并不会有)
* 2. 增删改查
*/
// 1.1 创建 元素节点
var myLi = document.createElement('li')
// 1.2 创建文本节点
var myStr = document.createTextNode('222222222222222')
myLi.appendChild(myStr)
console.log(myLi)
// console.log(myStr)
// 获取UL标签
var oUl = document.querySelector('ul')
var oLi = document.getElementsByTagName('li')[1]
// 2.1 增加dom(添加到指定父节点的最后)
// oUl.appendChild(myLi)
// 2.2 增加dom(添加到指定父节点的最后) 语法; 父节点.insertBefore(要插入的新节点, 插入到那个节点前(传递Null的话是插入到父节点最后))
// oUl.insertBefore(myLi, null)
// 2.3 增加dom(添加到父节点的最前边)
// oUl.insertBefore(myLi, oUl.firstElementChild)
// 3. 删除DOM 父节点.removeChild(要删除的节点)
// oUl.removeChild(oUl.firstElementChild)
// 4. 修改某一个节点 父节点.replaceChild(新的节点, 要被修改的节点)
// oUl.replaceChild(myLi, oLi)
</script>
克隆DOM
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var oUl = document.querySelector('ul')
var oLi = document.querySelector('li')
// console.log(oUl)
// console.log(oLi)
// oUl.appendChild(oLi) // 把原本的 li 从原本的位置, 移动到父节点的最后
/**
* 复制(克隆)一个 LI
*
* 想要复制的节点.cloneNode(参数布尔值)
* 参数 false 不克隆子节点 默认
* 参数 true 克隆子节点
*/
var newLi = oLi.cloneNode(true)
console.log(newLi)
oUl.appendChild(newLi)
</script>
