JS中的DOM操作

//根据id获取标签
document.getElementById('元素ID');

//根据类名获取标签（数组）
document.getElementsByClassName('类名');

//根据标签名获取标签（数组）
document.getElementsByTagName('标签名');


//按照选择器的方式来获取元素
console.log(document.querySelector('div'));   // 获取页面中的第一个 div 元素
console.log(docuemnt.querySelector('.box'));   // 获取页面中第一个有 box 类名的元素
console.log(document.querySelector('#box'));   // 获取页面中第一个 id 名为 box 的元素
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素

//获取元素内部的 HTML 结构
var div = document.querySelector('div');
console.log(div.innerHTML);

div.innerHtml = "conten";  //赋值

//获取元素内部的文本
var div = document.querySelector('div');
console.log(div.innerText);

div.innerText = "content";  //赋值

//获取元素的某个属性（包括自定义属性）
<div a="100" class="box"></div>
<script>
    var div = document.querySelector('div')
    console.log(div.getAttribute('a')) // 100
    console.log(div.getAttribute('class')) // box
</script>

//给元素设置一个属性
<div></div>
<script>
    var div = document.querySelector('div')
    div.setAttribute('a', 100)
    div.setAttribute('class', 'box')
    console.log(div) // <div a="100" class="box"></div>
</script>

//直接移除元素的某个属性
<div a="100" class="box"></div>
<script>
    var div = document.querySelector('div')
    div.removeAttribute('class')
    console.log(div) // <div a="100"></div>
</script>

//给元素添加 css 样式
<div></div>
<script>
    var div = document.querySelector('div')
    div.style.width = "100px"
    div.style.height = "100px"
    div.style.backgroundColor = "pink"
    console.log(div)    
    //<div style="width: 100px; height: 100px; background-color: pink;">
</script>

//获取元素样式（行内样式）
<div style="height:100px;"></div>
<script>
    var oDiv = document.querySelector('div')
    console.log(oDiv.style.height) // 100px
    console.log(oDIv.style.width) // ''
</script>

//可获取行内样式，也可获取非行内样式
<style>
    div{
        width:100px;
    }
</style>
<div style="height:100px;"></div>
<script>
    var oDiv = document.querySelector('div')
    console.log(window.getComputedStyle(oDiv).width) // 100px
    console.log(window.getComputedStyle(oDiv).height) // 100px
</script>

<script>
    var oDiv = document.querySelector('div')
    console.log(oDiv.currentStyle.width) // 100px
    console.log(oDiv.currentStyle.height) // 100px
</script>

//操作元素的类名的（div.className = "newClassName"）.,可复制
<div class="box"></div>
<script>
    var div = document.querySelector('div')
    console.log(div.className) // box
</script>

//获取某一个节点下所有的子一级节点（childNodes）
var oDiv = document.querySelector('div')
console.log(oDiv.childNodes)

//获取某一节点下所有的子一级 元素节点（children）
var oDiv = document.querySelector('div')
console.log(oDiv.children)

//获取某一节点下子一级的第一个节点（firstChild）
var oDiv = document.querySelector('div')
console.log(oDiv.firstChild)

//获取某一节点下子一级的最后一个节点(lastChild)
var oDiv = document.querySelector('div')
console.log(oDiv.lastChild)

//获取某一节点下子一级第一个元素节点
<div>
    <p>hello</p>
    <p>world</p>
</div>
<script>
    var oDiv = document.querySelector('div')
    console.log(oDiv.firstElementChild)    // <p>hello</p>
</script>

//获取某一节点下子一级最后一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.lastElementChild)        // <p>world</p>