webフロントエンド-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の違いは?

elm.Children:通常のDOM要素のみを返します.

elm.childNodes:すべての要素を返します.DOM要素、テキストノード、テキスト、つまり要素と要素の間の改行もテキストノードに属します.コメントもテキストノードに属します.

    
    

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

3、照会要素はいくつかのよくある方法がありますか?ES 5の元素の選択方法は何ですか?
方法
意味
Dcument.getElemenntById()
IDで要素を調べます.
Dcument.getElements ByClass Name()
classで要素を検索します.帰ってきたのは配列ですので、配列の下付きを使います.
Dcument.getElementsByTagName()
要素名で要素を検索
Dcument.getElementsByName()
要素のname属性によって要素を調べます.
document.Element FroomPoint(x,y)
ロケーションによって要素を検索します.
Dcument.querySelector(「玨box.wrap」)
ES 5はサポートしています.パラメータの書き方はCSSセレクタに従って、単一の要素を返します.
Dcument.querySelectorAll(「玨box.wrap」)
ES 5はサポートしています.パラメータの書き方はCSSセレクタによって複数の要素を返します.
4、どのように要素を作成しますか?要素に属性を設定するにはどうすればいいですか?属性の削除方法
番号付け
操作
コード
0
クエリ要素
var div=document.getElemenntById(「box」)
1
要素を作成
var a=document.creat Element("a")
2
テキストノードを追加
var aText=document.create Text Node("hello")
3
作成した要素にテキストノードを追加します.
a.apendChild(aText)
4
属性の設定
a.set Attribute(「href」、「http://www.baidu.com");
5
要素に追加
div.apendChild(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)