웹 전단 - js 소기 (8) - DOM

1. dom 대상 의 innerText 와 innerHTML 은 어떤 차이 가 있 습 니까?

innerText 속성: 요소 내부 의 텍스트 내용 을 되 돌려 줍 니 다

innerHTML 속성: 요소 내부 의 HTML 구 조 를 되 돌려 줍 니 다. 텍스트 와 태그

를 포함 합 니 다.

    

  var ct=document.getElementById("box");
  console.log(ct.innerHTML);    //<p>    </p>
  console.log(ct.innerText);       //    

2. elem. children 과 elem. childNodes 의 차이 점 은?

elem. children: 일반 DOM 요소 만 되 돌려 줍 니 다.

elem. childNodes: 모든 요 소 를 되 돌려 줍 니 다. DOM 요소, 텍스트 노드, 문 자 를 포함 합 니 다. 즉, 요소 와 요소 간 의 줄 바 꿈 도 텍스트 노드 에 속 하고 주석 도 텍스트 노드 에 속 합 니 다.

    
    

  var ct=document.getElementById("box");
  console.log(ct.children);    //["<p>    </p>"]
  console.log(ct.childNodes);       //["    ","<p>    </p>"]

3. 요 소 를 조회 하 는 데 몇 가지 흔 한 방법 이 있 습 니까?ES5 의 요소 선택 방법 은 무엇 입 니까?
방법.
속뜻
document.getElementById()
id 를 통 해 요 소 를 조회 합 니 다.
document.getElementsByClassName()
클 라 스 를 통 해 요 소 를 조회 합 니 다. 배열 로 돌아 가기 때문에 배열 아래 표 시 를 사용 해 야 합 니 다.
document.getElementsByTagName()
요소 이름 으로 요 소 를 조회 합 니 다.
document.getElementsByName()
요소 의 name 속성 을 통 해 요 소 를 조회 합 니 다.
document.ElementFromPoint(x,y)
포 지 셔 닝 을 통 해 요 소 를 조회 합 니 다.
document.querySelector("#box .wrap")
ES5 지원, 매개 변수 작성 은 CSS 선택 기 에 따라 단일 요 소 를 되 돌려 줍 니 다.
document.querySelectorAll("#box .wrap")
ES5 지원, 매개 변수 작성 은 CSS 선택 기 에 따라 여러 요 소 를 되 돌려 줍 니 다.
4. 요 소 를 어떻게 만 듭 니까?어떻게 원소 에 속성 을 설정 합 니까?속성 삭제 방법
번호
조작 하 다.
코드
0
검색 요소
var div=document.getElementById("box");
1
요소 생 성
var a=document.createElement("a");
2
텍스트 노드 추가
var aText=document.createTextNode("hello");
3
만 든 요소 에 텍스트 노드 추가
a.appendChild(aText);
4
속성 설정
a.setAttribute("href","http://www.baidu.com");
5
요소 에 추가
div.appendChild(a);
6
속성 삭제
a.removeAttribute("href");
5. 페이지 요소 에 하위 요 소 를 어떻게 추가 합 니까?어떻게 페이지 요소 아래 의 하위 요 소 를 삭제 합 니까?

  var box=document.getElementsByClassName("box")[0];           //    
  var img=document.createElement("img");                                 //    
  img.setAttribute("src","https://www.baidu.com/img/bd_logo1.png");    //       
  box.appendChild(img);                                   //           
  box.removeChild(img);                                  //        

6、element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

classList方法	含义
element.classList	获取元素的class名称，返回数组
element.classList.add(class1, class2, ...)	给元素增加class
element.classList.remove(class1, class2, ...)	删除元素的class
element.classList.contains(class)	判断元素中有没有包含参数的class
element.classList.toggle(class,true/false)	在元素中转换类名，第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，false表示强制移除，true表示强制添加。

  var box=document.getElementsByClassName("box")[0];
  console.log(box.classList.contains("box"));              //  true，       class  box
  box.classList.add("box1","box2");                        //     class
  box.classList.remove("box1","box2");                    //      class

7、如何选中如下代码所有的li元素？ 如何选中btn元素？

   

       
list1
       
list2
       
list3
   
     


  var li=document.querySelectorAll(".mod-tabs>ul>li");
  var btn=document.querySelector(".btn");
  var btn1=document.getElementsByClassName("btn")[0];
  var btn2=document.getElementsByTagName("button")[0];

(mission 8)