獲取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ù),所以找到了就會將找到的標(biāo)簽包裝成一個(gè)對象返回給我們,找不到就返回Null
注意點(diǎn):DOM操作返回的是一個(gè)對象,這個(gè)對象是宿主類型對象(瀏覽器提供的對象)

    let oDiv = document.getElementById("box");
    console.log(oDiv);
    console.log(typeof oDiv);

2.通過class名稱獲取
由于class可以重復(fù),所以找到了就返回一個(gè)存儲了標(biāo)簽對象的數(shù)組,找不到就返回一個(gè)空數(shù)組

    let oDivs = document.getElementsByClassName("father");
    console.log(oDivs);

3.通過name名稱獲取
由于name可以重復(fù),所以找到了就返回一個(gè)存儲了標(biāo)簽對象的數(shù)組,找不到就返回一個(gè)空數(shù)組
注意點(diǎn):getElementByName 在不用的瀏覽器其中工作方式不同.在IE和Opera中,getElementByName()方法還會返回哪些id為指定值的元素.

    let oDivs = document.getElementsByName("test");
    console.log(oDivs);

4.通過標(biāo)簽名稱獲取
由于標(biāo)簽名稱可以重復(fù),所以找到了就返回一個(gè)存儲了標(biāo)簽對象的數(shù)組,找不到就返回一個(gè)空數(shù)組

    let oDivs =  document.getElementsByTagName("div");
    console.log(oDivs);

5.通過選擇器獲取(重點(diǎn)掌握)
querySelector只會返回根據(jù)指定選擇器找到的第一個(gè)元素

    let oDiv = document.querySelector("#box");
    let oDiv = document.querySelector(".father");
    let oDiv = document.querySelector("div>form");
    console.log(oDiv);

6.通過選擇器獲取(重點(diǎn)掌握)
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é)點(diǎn)

for(let node of oDiv childNodes){
   if(node.nodeType === Node.ELEMENT_NODE){
console.log(node);
     }
}

2.節(jié)點(diǎn):DOM對象(document),這個(gè)對象已樹的形式保存了頁面上所有的內(nèi)容 HTML頁面每一部分都是由節(jié)點(diǎn)(標(biāo)簽(元素),文本,屬性)構(gòu)成的
3.獲取指定節(jié)點(diǎn)中的第一個(gè)子節(jié)點(diǎn)

let oDiv = document.querySelector("div");
console.log(oDiv.firstChild);

獲取指定元素中的第一個(gè)子元素

console.log(oDiv.firstElementChild);

4.獲取指定節(jié)點(diǎn)中最后一個(gè)子節(jié)點(diǎn)

console.log(oDiv.lastChild);

獲取指定元素中最后一個(gè)子元素

console.log(oDiv.lastElementChild);

5.通過子元素獲取父元素/父節(jié)點(diǎn)

let item = document,querySelector(".item");     
console.log(item.parentElement);
console.log(item.parentNode);

6.獲取相鄰上一個(gè)節(jié)點(diǎn)/元素

console.log(item.previousSibling);
console.log(item.previousElementSibling);

7.獲取相鄰下一個(gè)節(jié)點(diǎn)/元素

console.log(item.nextSibling);
console.log(item.nextElementSibling);

節(jié)點(diǎn)增刪改查

    <div>
      <h1>我是標(biāo)題</h1>
      <p>我是段落</p>
    </div>

1.創(chuàng)建節(jié)點(diǎn)

let oSpan = document.createElement("span");

2.添加節(jié)點(diǎn)
注意點(diǎn):appendChild方法會將指定的元素添加到最后

let oDiv = document.querySelector("div");
oDiv.appendChild(oSpan)
let oA = document.createElement("a");
oDiv.appendChild(oA);

3.插入節(jié)點(diǎn)

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é)點(diǎn)
注意點(diǎn): 在js中如果想要刪除某一個(gè)元素, 只能通過對應(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é)點(diǎn)
注意點(diǎn): cloneNode方法默認(rèn)不會克隆子元素, 如果想克隆子元素需要傳遞一個(gè)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)建還是查詢出來的標(biāo)簽,系統(tǒng)都會講元素包裝成一個(gè)對象返回給我們,系統(tǒng)在包裝這個(gè)對象的時(shí)候回自動將元素的屬性都包裝到這個(gè)對象中,所以只要拿到這個(gè)對象就可以拿到標(biāo)簽屬性,操作標(biāo)簽屬性

let oImg = document.querySelector("img");
//let oImg = document.createElement("img");
console.dir(oImg); //console.log()會在瀏覽器控制臺打印出信息; console.dir()可以顯示一個(gè)對象的所有屬性和方法

1.獲取元素屬性 >

let oImg = document,querySelector("img")
//console.log(oImg.alt);
console.log(oImg.getAttribute("alt"));

注意點(diǎn): 通過對象.屬性名稱的方式無法獲取到自定義屬性的取值
通過getAttribute方法可以獲取到自定義屬性的取值

2.修改元素屬性

let oImg = document.querySelector("img");
//oImg.title = "新的title";
oImg.setAttribute("title", "新的title222"); //參數(shù):要修改的屬性名 參數(shù):新的屬性值

注意點(diǎn):和獲取元素屬性一樣

3.新增元素屬性

let oImg = document.querySelector("img");
oImg.setAttribute("zxw", "666");

注意點(diǎn): setAttribute方法如果屬性不存在就是新增, 如果屬性存在就是修改

4,刪除元素屬性

let oImg = document.querySelector("img");
// oImg.alt = "";
oImg.removeAttribute("alt");

注意點(diǎn)和獲取元素屬性一樣

元素內(nèi)容操作

    <div>
      我是div
      <h1>我是標(biāo)題</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)容包含標(biāo)簽, innerText/textContent獲取的內(nèi)容不包含標(biāo)簽
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>";

特點(diǎn):
無論通過innerHTML/innerText/textContent設(shè)置內(nèi)容, 新的內(nèi)容都會覆蓋原有的內(nèi)容

區(qū)別:
如果通過innerHTML設(shè)置數(shù)據(jù), 數(shù)據(jù)中包含標(biāo)簽, 會轉(zhuǎn)換成標(biāo)簽之后再添加
如果通過innerText/textContent設(shè)置數(shù)據(jù), 數(shù)據(jù)中包含標(biāo)簽, 不會轉(zhuǎn)換成標(biāo)簽, 會當(dāng)做一個(gè)字符串直接設(shè)置

在企業(yè)開發(fā)中,因?yàn)橛袨g覽器兼容的問題,所以innerText/textContent是結(jié)合起來使用的.所以 如果我們想把內(nèi)容當(dāng)做字符串設(shè)置進(jìn)去的話,我們一般這樣操作

      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
    // 第一種方式
       注意點(diǎn): 由于class在JS中是一個(gè)關(guān)鍵字, 所以叫做className
       oDiv.className = "box"; 為div設(shè)置一個(gè)值   
    // 第二種方式
    // 注意點(diǎn): 過去CSS中通過-連接的樣式, 在JS中都是駝峰命名
    // 注意點(diǎn): 通過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";
      // 注意點(diǎn): 通過style屬性只能過去到行內(nèi)樣式的屬性值, 獲取不到CSS設(shè)置的屬性值
      // console.log(oDiv.style.width);
      // 注意點(diǎn): 如果想獲取到CSS設(shè)置的屬性值, 必須通過getComputedStyle方法來獲取
      // getComputedStyle方法接收一個(gè)參數(shù), 這個(gè)參數(shù)就是要獲取的元素對象
      // getComputedStyle方法返回一個(gè)對象, 這個(gè)對象中就保存了CSS設(shè)置的樣式和屬性值
      let style = window.getComputedStyle(oDiv);
      console.log(style.width);