關(guān)于基礎(chǔ)的元素選擇器，元素的關(guān)系選擇器，其他節(jié)點(diǎn)選擇器耍铜，以及關(guān)于屬性的操作的總結(jié)
<body>
<div?id="box">1</div>
<div?id="box">2</div>
<div?id="box">3</div>
<div?class="cont">4</div>
<div?class="cont">5</div>
<div?class="cont">6</div>
<div?class="msg">
<div?class="xbox">
<h2>二級(jí)標(biāo)題3</h2>
<h2>二級(jí)標(biāo)題4</h2>
</div>
<h2>二級(jí)標(biāo)題1</h2>
<h2>二級(jí)標(biāo)題2</h2>
</div>
<span>7</span>
<span>8</span>
<span>9</span>
<input?type="text"?name="user">
<input?type="text"?name="pass">
<input?type="text"?name="user">
</body>
元素的基礎(chǔ)選擇器：
1:querySelector：無論如何只能選擇一個(gè)元素邑闺，單個(gè)元素，哪怕有多個(gè)
var ele = document.querySelector("#box");
console.log(ele);//<div id="box">1</div>
console.log(ele.innerHTML);//1
var ele = document.querySelector(".msg h2");//h3選擇的是后代元素的第一個(gè)
var ele = document.querySelector(".msg>h2");//h1選擇的是直系子代的第一個(gè)
2：querySelectorAll：可以選擇多個(gè)棕兼，無論如何選擇出的都是數(shù)組陡舅，哪怕只有一個(gè)，解析數(shù)組后才能使用標(biāo)簽
var?ele = document.querySelectorAll("#box");
console.log(ele);//得到的是一個(gè)數(shù)組伴挚，可以通過數(shù)組的序列選擇靶衍，來選定需要選擇的元素
元素的關(guān)系選擇器
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<div?class="box">
<div?class="xbox">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
</div>
<em>1</em>
<em>2</em>
<em>3</em>
</body>
var oXbox = document.querySelector(".xbox");
1：父選子元素：子可以有多個(gè)，必須是數(shù)組茎芋，要拿到具體的元素颅眶，必須先解析數(shù)組
var child = oXbox.children;
console.log(child);//得到一個(gè)p的數(shù)組
2：子選父元素：父只能有一個(gè)，只能是單個(gè)元素
var parent = oXbox.parentNode;
console.log(parent);//
3：第一個(gè)子元素
var first = oXbox.firstElementChild;
console.log(first);
4:最后一個(gè)子元素
var last = oXbox.lastElementChild;
console.log(last);
5：上一個(gè)兄弟元素節(jié)點(diǎn)
var?obox = document.querySelector(".box");
var?c=obox.previousElementSibling;//.box的上一個(gè)兄弟元素節(jié)點(diǎn)
console.log(c);//<span>3</span>
6：下一個(gè)兄弟元素節(jié)點(diǎn)
var?b=obox.nextElementSibling;//.box的下一個(gè)兄弟元素節(jié)點(diǎn)
console.log(b);//<em>1</em>
其他節(jié)點(diǎn)選擇器
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<div?class="box"?id="a"?title="b"?abc="c"?ajsjsd="d">
<div?class="xbox">
hello
<p>段落1</p>
<!-- <p>段落2</p> -->
<p>段落3</p>
</div>
</div><em>1</em>
<em>2</em>
<em>3</em>
</body>
var oxbox = document.querySelector(".xbox");
1：子節(jié)點(diǎn)選擇器
var child = oxbox.childNodes;
console.log(child);//得到一個(gè)length為7的數(shù)組田弥，拿到具體的子節(jié)點(diǎn)涛酗，需要借助數(shù)組的索引
2:第一個(gè)子節(jié)點(diǎn)和最后一個(gè)子節(jié)點(diǎn)
console.log(oxbox.firstChild);//是一個(gè)text
console.log(oxbox.lastChild);//是一個(gè)text
3:上一個(gè)兄弟節(jié)點(diǎn)，下一個(gè)兄弟節(jié)點(diǎn)
var obox = document.querySelector(".box");
console.log(obox.previousSibling)//是一個(gè)text
console.log(obox.nextSibling)//<em>1</em>
4:屬性節(jié)點(diǎn)偷厦，需要配合單獨(dú)的屬性節(jié)點(diǎn)選擇器選中商叹，不在DOM的家族關(guān)系中
var obox = document.querySelector(".box");//.box的類型為對(duì)象
var?b=obox.attributes//選擇.box中的屬性節(jié)點(diǎn)
console.log(b);//一個(gè)類似于數(shù)組的對(duì)象，可以使用數(shù)組的操作方法
得到具體的節(jié)點(diǎn)中的屬性只泼，需要結(jié)合數(shù)組的索引
對(duì)屬性的操作
<body>
<div?class="box"?title="這是一個(gè)title"?abc="hello"?href="asdas"?><i>內(nèi)容</i></div>
</body>
一：內(nèi)置屬性:
相當(dāng)于是對(duì)對(duì)象的操作（點(diǎn)語法,[]中括號(hào)語法）
var?obox=document.querySelector(".box");
1:可見的
console.log(obox.className)//box;
obox.className = "qwewqe";//頁面上的div中變?yōu)閏lass="qwewqe"
2：不可見的:
innerHTML,innerText,tagName
console.log(obox.innerHTML)//打印div中的內(nèi)容
console.log(obox.innerText)//打印div中的內(nèi)容剖笙，包括內(nèi)容中的標(biāo)簽
console.log(obox.tagName)//打印這個(gè)標(biāo)簽的類型
二：自定義屬性:
1:可見的
可見:Attribute系列：set，get请唱，remove
console.log(obox.getAttribute("abc"))//hello
obox.setAttribute("qwe","hahahahah")//在div中創(chuàng)建了一個(gè)qwe:"hahhahhah"的屬性
obox.removeAttribute("abc")//刪除了abc這個(gè)屬性
2:不可見的
就是講元素對(duì)象當(dāng)做對(duì)象操作
節(jié)點(diǎn)的操作
<body>
<div?class="box"?title="這是一個(gè)title"?abc="這是一個(gè)自定義abc">
<span>1</span>
hello
<!-- 這是一個(gè)注釋 -->
<span>2</span>
<em>3</em>
<em>4</em>
<em>5</em>
</div>
</body>
/ 節(jié)點(diǎn)：
// 元素枯途，文本，注釋籍滴，屬性節(jié)點(diǎn)
// 節(jié)點(diǎn)類型:nodeType
// 節(jié)點(diǎn)名字:nodeName
// 節(jié)點(diǎn)值:nodeValue
1:對(duì)子節(jié)點(diǎn)的操作
var obox = document.querySelector(".box")//選中元素
var child = obox.childNodes;//選中節(jié)點(diǎn)的子節(jié)點(diǎn)，得到一個(gè)數(shù)組榴啸，對(duì)相應(yīng)的子節(jié)點(diǎn)操作孽惰，需要借助索引
console.log(child[1].nodeType); //1
console.log(child[1].nodeName);?//SPAN
console.log(child[1].nodeValue);?//null
2:對(duì)屬性節(jié)點(diǎn)的操作
var obox = document.querySelector(".box")//選中元素
var attr = obox.attributes;//選中元素中的屬性節(jié)點(diǎn)
DOM的樣式操作
<style>
.box{width:100px;height:100px;background:red;border: solid?20px?yellow;}
</style>
1:獲取行內(nèi)和給行內(nèi)樣式
var?obox = document.querySelector(".box");
console.log(getComputedStyle(obox,false).width)//獲取width的寬度值：100px;
2：設(shè)置樣式:obox.style.width="200px";//將width的寬度值設(shè)置成200px;
obox.style.cssText="text-align:right;"http://比較常用
// 獲取樣式就用：getStyle
// 設(shè)置樣式就用：style屬性
獲取樣式只能在正常瀏覽器中使用，IE除外鸥印，參照兼容的封裝函數(shù)
兼容的封裝函數(shù)：
function?getStyle(ele,attr){
if(ele.currentStyle){ //以IE的書寫格式獲取
return?ele.currentStyle[attr];
}else{
return?getComputedStyle(ele,false)[attr];
}
}
console.log(getStyle(obox,"width"))
console.log(getStyle(obox,"background-color"))
console.log(getStyle(obox,"border-width"))
DOM尺寸的獲取
<style>
.box{width:100px;height:100px;padding:10px;border: solid?20px?black;margin: 60px;position: relative;left:80px;top:80px;overflow: auto;}
</style>
<body>
<h2>321213</h2>
<div?class="box">
出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條出現(xiàn)滾動(dòng)條
</div>
</body>
1:div尺寸的獲取//比較常用
console.log(obox.offsetHeight); //cont+padding+border?160=100+20+40
console.log(obox.clientHeight); //cont+padding?120=100++20
console.log(obox.scrollHeight); //包括可以滾動(dòng)的尺寸超出邊框的內(nèi)容也包括在內(nèi)
2:div相對(duì)于頁面位置的值的獲取
console.log(obox.offsetTop); //相對(duì)于頁面或包含塊偏移的位置
console.log(obox.offsetLeft); //相對(duì)于頁面或包含塊偏移的位置
擴(kuò)展：三木運(yùn)算
var a = n<10 ? "0"+n : n;
補(bǔ)0：如果你<10 則補(bǔ)0 否則為n;
DOM元素的操作
//?創(chuàng)建元素
????//?var?abc?=?document.createElement("div");//比較常用
????//?console.log(abc);
????//?將元素插入到指定的父級(jí)的最后一個(gè)子元素
??? body.appendChild(abc);
????//?刪除元素
????//?var?box?=?document.querySelector(".box")
????//?var?op?=?box.children[0];
????//?box.remove();
????//?box.removeChild(op);
????//?op.remove()
????//?改標(biāo)簽：
????var?box?=?document.querySelector(".box")
????//?console.log(box.outerHTML)
????//?box.outerHTML?=?"<span>"+?box.innerHTML?+"</span>";
