獲取DOM元素 part1
<div class="father">
<form>
<input type="text" name="test" />
<input type="password" name="test" />
</form>
</div>
<div class="father" id="box">我是div</div>
1.通過id獲取指定元素
由于id不可以重復(fù),所以找到了就會將找到的標簽包裝成一個對象返回給我們,找不到就返回Null
注意點:DOM操作返回的是一個對象,這個對象是宿主類型對象(瀏覽器提供的對象)
let oDiv = document.getElementById("box");
console.log(oDiv);
console.log(typeof oDiv);
2.通過class名稱獲取
由于class可以重復(fù),所以找到了就返回一個存儲了標簽對象的數(shù)組,找不到就返回一個空數(shù)組
let oDivs = document.getElementsByClassName("father");
console.log(oDivs);
3.通過name名稱獲取
由于name可以重復(fù),所以找到了就返回一個存儲了標簽對象的數(shù)組,找不到就返回一個空數(shù)組
注意點:getElementByName 在不用的瀏覽器其中工作方式不同.在IE和Opera中,getElementByName()方法還會返回哪些id為指定值的元素.
let oDivs = document.getElementsByName("test");
console.log(oDivs);
4.通過標簽名稱獲取
由于標簽名稱可以重復(fù),所以找到了就返回一個存儲了標簽對象的數(shù)組,找不到就返回一個空數(shù)組
let oDivs = document.getElementsByTagName("div");
console.log(oDivs);
5.通過選擇器獲取(重點掌握)
querySelector只會返回根據(jù)指定選擇器找到的第一個元素
let oDiv = document.querySelector("#box");
let oDiv = document.querySelector(".father");
let oDiv = document.querySelector("div>form");
console.log(oDiv);
6.通過選擇器獲取(重點掌握)
querySelectorAll會返回指定選擇器找到的所有元素
let oDivs = document.querySelectorAll(".father");
console.log(oDivs);
獲取DOM元素 part2
<div>
<h1>1</h1>
<h2>2</h2>
<p class="item">3</p>
<p>4</p>
<span>5</span>
</div>
1.獲取指定元素所有的子元素
let oDiv = document,querySelector("div");
console.log(oDiv.children); //children屬性獲取到的是指定元素中所有的子元素
console.log(oDiv.childNodes);//childNodes屬性獲取到的是指定元素中所有的節(jié)點
for(let node of oDiv childNodes){
if(node.nodeType === Node.ELEMENT_NODE){
console.log(node);
}
}
2.節(jié)點:DOM對象(document),這個對象已樹的形式保存了頁面上所有的內(nèi)容 HTML頁面每一部分都是由節(jié)點(標簽(元素),文本,屬性)構(gòu)成的
3.獲取指定節(jié)點中的第一個子節(jié)點
let oDiv = document.querySelector("div");
console.log(oDiv.firstChild);
獲取指定元素中的第一個子元素
console.log(oDiv.firstElementChild);
4.獲取指定節(jié)點中最后一個子節(jié)點
console.log(oDiv.lastChild);
獲取指定元素中最后一個子元素
console.log(oDiv.lastElementChild);
5.通過子元素獲取父元素/父節(jié)點
let item = document,querySelector(".item");
console.log(item.parentElement);
console.log(item.parentNode);
6.獲取相鄰上一個節(jié)點/元素
console.log(item.previousSibling);
console.log(item.previousElementSibling);
7.獲取相鄰下一個節(jié)點/元素
console.log(item.nextSibling);
console.log(item.nextElementSibling);
節(jié)點增刪改查
<div>
<h1>我是標題</h1>
<p>我是段落</p>
</div>
1.創(chuàng)建節(jié)點
let oSpan = document.createElement("span");
2.添加節(jié)點
注意點:appendChild方法會將指定的元素添加到最后
let oDiv = document.querySelector("div");
oDiv.appendChild(oSpan)
let oA = document.createElement("a");
oDiv.appendChild(oA);
3.插入節(jié)點
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oH1); //含義:將oSpan 添加到oDiv里,并且在oH1
//之前
// oDiv.insertBefore(oSpan, oP);
4.刪除節(jié)點
注意點: 在js中如果想要刪除某一個元素, 只能通過對應(yīng)的父元素來刪除
元素是不能夠自刪的
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oP);
console.log(oSpan.parentNode); //拿到oSpan的父元素
oSpan.parentNode.removeChild(oSpan); //通過元素的父元素 刪除父元素中指定的子元素
oDiv.parentNode.removeChild(oDiv);
5.克隆節(jié)點
注意點: cloneNode方法默認不會克隆子元素, 如果想克隆子元素需要傳遞一個true
let oDiv = document.querySelector("div"); //拿到div 并賦值給oDiv
let newDiv = oDiv.cloneNode(); // 克隆oDiv 不包含子元素
let newDiv = oDiv.cloneNode(true); //傳遞true 包含子元素
console.log(newDiv);
元素屬性操作
<img src="images/1.jpg" alt="我是alt" title="我是title" zxw="999" />
無論是通過document創(chuàng)建還是查詢出來的標簽,系統(tǒng)都會講元素包裝成一個對象返回給我們,系統(tǒng)在包裝這個對象的時候回自動將元素的屬性都包裝到這個對象中,所以只要拿到這個對象就可以拿到標簽屬性,操作標簽屬性
let oImg = document.querySelector("img");
//let oImg = document.createElement("img");
console.dir(oImg); //console.log()會在瀏覽器控制臺打印出信息; console.dir()可以顯示一個對象的所有屬性和方法
1.獲取元素屬性 >
let oImg = document,querySelector("img")
//console.log(oImg.alt);
console.log(oImg.getAttribute("alt"));
注意點: 通過對象.屬性名稱的方式無法獲取到自定義屬性的取值
通過getAttribute方法可以獲取到自定義屬性的取值
2.修改元素屬性
let oImg = document.querySelector("img");
//oImg.title = "新的title";
oImg.setAttribute("title", "新的title222"); //參數(shù):要修改的屬性名 參數(shù):新的屬性值
注意點:和獲取元素屬性一樣
3.新增元素屬性
let oImg = document.querySelector("img");
oImg.setAttribute("zxw", "666");
注意點: setAttribute方法如果屬性不存在就是新增, 如果屬性存在就是修改
4,刪除元素屬性
let oImg = document.querySelector("img");
// oImg.alt = "";
oImg.removeAttribute("alt");
注意點和獲取元素屬性一樣
元素內(nèi)容操作
<div>
我是div
<h1>我是標題</h1>
<p>我是段落</p>
</div>
1.獲取元素內(nèi)容
let oDiv = document.querySelector("div"); //拿到div
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
console.log(oDiv.textContent);
innerHTML&innerText&textContent差異
1.innerHTML獲取的內(nèi)容包含標簽, innerText/textContent獲取的內(nèi)容不包含標簽
2.innerHTML/textContent獲取的內(nèi)容不會去除兩端的空格, innerText獲取的內(nèi)容會去除兩端的空格
2.設(shè)置元素內(nèi)容
let oDiv = document.querySelector("div");
// oDiv.innerHTML = "123";
// oDiv.innerText = "456";
// oDiv.textContent = "789";
// oDiv.innerHTML = "<span>我是span</span>";
// oDiv.innerText = "<span>我是span</span>";
// oDiv.textContent = "<span>我是span</span>";
特點:
無論通過innerHTML/innerText/textContent設(shè)置內(nèi)容, 新的內(nèi)容都會覆蓋原有的內(nèi)容
區(qū)別:
如果通過innerHTML設(shè)置數(shù)據(jù), 數(shù)據(jù)中包含標簽, 會轉(zhuǎn)換成標簽之后再添加
如果通過innerText/textContent設(shè)置數(shù)據(jù), 數(shù)據(jù)中包含標簽, 不會轉(zhuǎn)換成標簽, 會當做一個字符串直接設(shè)置
在企業(yè)開發(fā)中,因為有瀏覽器兼容的問題,所以innerText/textContent是結(jié)合起來使用的.所以 如果我們想把內(nèi)容當做字符串設(shè)置進去的話,我們一般這樣操作
function setText(obj, text) {
if ("textContent" in obj) {
obj.textContent = text;
} else {
obj.innerText = text;
}
}
操作元素樣式
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="box"></div>
1.設(shè)置元素樣式
let oDiv = document.querySelector("div"); 拿到div
// 第一種方式
注意點: 由于class在JS中是一個關(guān)鍵字, 所以叫做className
oDiv.className = "box"; 為div設(shè)置一個值
// 第二種方式
// 注意點: 過去CSS中通過-連接的樣式, 在JS中都是駝峰命名
// 注意點: 通過JS添加的樣式都是行內(nèi)樣式, 會覆蓋掉同名的CSS樣式
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.backgroundColor = "blue";
2.獲取元素樣式
let oDiv = document.querySelector("div");
// oDiv.style.width = "300px";
// 注意點: 通過style屬性只能過去到行內(nèi)樣式的屬性值, 獲取不到CSS設(shè)置的屬性值
// console.log(oDiv.style.width);
// 注意點: 如果想獲取到CSS設(shè)置的屬性值, 必須通過getComputedStyle方法來獲取
// getComputedStyle方法接收一個參數(shù), 這個參數(shù)就是要獲取的元素對象
// getComputedStyle方法返回一個對象, 這個對象中就保存了CSS設(shè)置的樣式和屬性值
let style = window.getComputedStyle(oDiv);
console.log(style.width);
