JavaScriptがまとめたDOMのElement

6548 ワード

documentオブジェクトを除いて、DOMで最も一般的なのはElementオブジェクトです.ElementオブジェクトはHTML要素を表しています.
Elementオブジェクトは、要素ノード、テキストノード、注釈ノードのようなタイプのサブノードを有してもよく、DOMは、一連の方法を提供して、要素の増加、削除、変更、検索操作を行うことができる.

Elementにはいくつかの重要な属性があります.

nodeName：     ，      tagName
nodeType：    
className：  
id：  id
children：     （HTMLCollection）
childNodes：     （NodeList）
firstChild：      
lastChild：       
nextSibling：       
previousSibling：       
parentNode、parentElement：

クエリ要素

getElementById方法は、指定されたID属性にマッチする要素ノードを返す.一致するノードが見つからない場合は、nullに戻ります.これも1つの要素を得る最も早い方法です.

var elem = document.getElementById("test");
getElementsByClassName()

get Elements ByClass Name方法は、同じ配列のオブジェクト(HTMLCollectionタイプのオブジェクト)を返し、すべてのクラス名が指定された条件に適合する要素(検索範囲が自身を含む)を含み、要素の変化は、リアルタイムに戻り結果に反映される.この方法は、documentオブジェクトだけでなく、任意の要素ノードで呼び出すことができます.

var elements = document.getElementsByClassName(names);
//getElementsByClassName     ，          class  ，             。
document.getElementsByClassName('red test');```
* getElementsByTagName()
getElementsByTagName             （        ）。      HTMLCollection  ，    ，           ，                    。         document     ，             。

var paras=document.getElements ByTagName("p")//上のコードは現在のドキュメントのすべてのp要素ノードを返します.注意してください.getElements ByTagNameメソッドはパラメータを小文字にして検索します.

getElementsByName()getElementsByName法は、name属性を持つHTML要素を選択するためのもので、例えばform、img、frame、embed、およびObjectなど、NodeListフォーマットのオブジェクトを返して、要素の変化をリアルタイムに反映しない.

//         
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
//  ， IE         ，    name  、    id        ，  name id           。```

* querySelector()
querySelector         CSS        。             ，           。           ，   null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
//querySelector方法无法选中CSS伪元素。```

querySelectorAll()
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);
//querySelectorAll     ，          CSS   ，                。
var matches = document.querySelectorAll("div.note, div.alert");
//      class   note alert div  。

element FroomPointメソッドは、ページの指定された位置にある要素を返します.

var element = document.elementFromPoint(x, y);
//     ，elementFromPoint     x y，                     ，   CSS  。

element FroomPoint方法は、この位置にあるDOM要素を返します.要素がテキストボックスのスクロールバーなどの戻り不可の場合は、テキストボックスなどの親要素を返します.座標値が無意味(例えば負の値)の場合、nullに戻ります.
要素を作成

createElement()createElement方法は、HTML要素ノードを生成するために用いられる.

var newDiv = document.createElement("div");
//createElement            ，      tagName  。
//          ，      。         （ ）   null，   。

createText Node()createText Node方法はテキストノードを生成するために用いられ、パラメータは生成するテキストノードの内容である.

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
//        div

create DocktFragment()

//createDocumentFragment      DocumentFragment  。
var docFragment = document.createDocumentFragment();```
DocumentFragment           DOM  ，         ，          DOM  ，        。        ，  DocumentFragment       ，       ，            ，          DOM        。

##    

* appendChild()

var newDiv=document.create Element(「div」);var newContent=document.create Text Node(「ハロー」);newDiv.apendChild(newContitt);

insertBefore()要素を挿入する前に要素

を挿入します.

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
replaceChild()

replacceChild()は、2つのパラメータを受け入れる:挿入する要素と置換する要素

newDiv.replaceChild(newElement, oldElement);```


* removeChild()

parent Node.removeChild(childNode);

clone Nodeクローン要素は、ブール値パラメータがあります.trueに入ると、深くコピーされます.つまり、要素とそのサブ要素がコピーされます.falseの場合は、要素自体がコピーされます.

node.cloneNode(true);```

##    

* getAttribute()

//get Attribute()元素を取得するためのatribute値node.get Attribute('id')

createAttribute()

//createAttribute()              ，    。
attribute = document.createAttribute(name);
createAttribute     name，      。

set Attribute()

//setAttribute()          
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
//   
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);```
* romoveAttribute()

removeAttribute()は元素属性のnode.removeAttribute('id')を削除するために使用されます.element.atributes


                       element.attributes   

####HTMLCollection NodeList

    Element      ，                  

NodeList               
HTMLCollection      ，   HTML      ，                

        HTMLCollection

document.imags/すべてのimg元素document.links/href属性を持つすべてのa元素とara元素document.anchors/すべてのname属性を持つa元素document.forms/すべてのform元素document.scripts/すべてのscript元素document.appets/apple/appectttgotttttttgottttttgottttttgotttttttttttttgotgotgotgotgotgotdと同じ元素ntById(「table」).children document.getElemenntById(「table」).tBodies document.getElementById(「table」).row s documenment.getElementById(「row.」).cell dottttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttFormCotrollsCollection extends HTMLCollection document.getElement ById(「s」)Ooptions/HTM LOptions Collection extens HTMLClection`以下の方法で取得したのはNodeListオブジェクトです.

document.getElementsByName("name1")
document.getElementsByClassName("class1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.getElementById("table").childNodes
document.styleSheets //StyleSheetList， NodeList  ```
#####HTMLCollection NodeList        

*        ，  length  ，    for    

*      

*      ，                  (     ，document.querySelectorAll   NodeList     )

*   item()  ，    item(index) item("id")    

#####     

* HTMLCollection    namedItem()  ，    id name    

* HTMLCollection item()           (document.forms.f1)    id name， NodeList     id

自分で書いたJavascript計算時間差関数