JS - DOMの要素タイプ（D） - コードワールド

DOM要素タイプ

XMLまたはHTMLの要素を表すために使用される要素型は、要素のタグ名、子ノードおよびプロパティへのアクセスを提供します。

特徴：

nodeTypeの値1。
nodeNameの値要素のタグ名。
nodeValueはnullです。
parentNodeおそらくドキュメントまたは要素

タグ名タグ名とノード名を取得します：

var d=document.getElementById('myDiv');
        alert(d.tagName); // DIV,HTML中的标签名全部为大写，XML中标签名与源码一致
        alert(d.nodeName==d.tagName); // true

タグ名と比較し最高の変換一貫総額です

if(element.tagName.toLowerCase()=="div")

1.HTML要素

各HTML要素は特性があります。

ID：一意の文書内の要素を識別する
タイトル：要素に関する追加情報
```
<p title="p标签">www</p>
```

エレメントの## DOMの種類

XMLまたはHTMLの要素を表すために使用される要素型は、要素のタグ名、子ノードおよびプロパティへのアクセスを提供します。

特徴：

nodeTypeの値1。
nodeNameの値要素のタグ名。
nodeValueはnullです。
parentNodeおそらくドキュメントまたは要素

タグ名タグ名とノード名を取得します：

var d=document.getElementById('myDiv');
        alert(d.tagName); // DIV,HTML中的标签名全部为大写，XML中标签名与源码一致
        alert(d.nodeName==d.tagName); // true

タグ名と比較し最高の変換一貫総額です

if(element.tagName.toLowerCase()=="div")

1.HTML要素

各HTML要素は特性があります。

ID：一意の文書内の要素を識別する
タイトル：要素に関する追加情報
```
<p title="p标签">www</p>
```
LANG：言語コードの要素の内容
DIR：言語の方向

クラス名：特性はクラスでなければなりません

<div class="div1" id="divc">颜色</div>
...
var dc=document.getElementById('divc');
  dc.className="div2";

...
.div1{
          color:pink;
      }
.div2{
          color:yellow;
      }

1566354606981 1566354621421

2.プロパティを取得

getAttribute（）、setAttributeメソッド（）、removeAttribute（）これらの三つの方法。すべての機能のために使用することができます

<div id="myDiv" class="div3"  myarrt="haha">dd</div>
...
    var div=document.getElementById('myDiv');
    alert(div.getAttribute("id"));//myDiv
    alert(div.getAttribute("class"));//div3   这里不要用className
    alert(div.getAttribute("lang"));//null
    //自定义属性
    alert(div.getAttribute("myarrt"));//haha

プロパティ名は大文字と小文字を区別しません。

カスタムプロパティは、一部のブラウザには存在しないことがあります。

3.プロパティを設定します

setAttribute（）は、2つのパラメータを取ります：属性名を設定し、値をすること

<div id="changDiv" class="div1">change</div>
...
var div=document.getElementById('changDiv');
        div.setAttribute("class","div2");
        div.setAttribute("title","change");

また、この値を設定することができます

div.id="some";
div.title="other";

しかし、そのようなDOM要素としてカスタムプロパティを追加しないで、プロパティが自動的に一部のブラウザを除いて、プロパティ要素にはなりません。

div.myColor="blue";
alert(div.getAttribute("myColor"));//null

removeAttribute（）メソッドは、完全にこの属性を削除するために使用されます。

div.removeAttribute("class")

プロパティを4.attributes

LANG：言語コードの要素の内容
DIR：言語の方向

クラス名：特性はクラスでなければなりません

<div class="div1" id="divc">颜色</div>
...
var dc=document.getElementById('divc');
  dc.className="div2";

...
.div1{
          color:pink;
      }
.div2{
          color:yellow;
      }

1566354621421

2.プロパティを取得

getAttribute（）、setAttributeメソッド（）、removeAttribute（）これらの三つの方法。すべての機能のために使用することができます

<div id="myDiv" class="div3"  myarrt="haha">dd</div>
...
    var div=document.getElementById('myDiv');
    alert(div.getAttribute("id"));//myDiv
    alert(div.getAttribute("class"));//div3   这里不要用className
    alert(div.getAttribute("lang"));//null
    //自定义属性
    alert(div.getAttribute("myarrt"));//haha

プロパティ名は大文字と小文字を区別しません。

カスタムプロパティは、一部のブラウザには存在しないことがあります。

3.プロパティを設定します

setAttribute（）は、2つのパラメータを取ります：属性名を設定し、値をすること

<div id="changDiv" class="div1">change</div>
...
var div=document.getElementById('changDiv');
        div.setAttribute("class","div2");
        div.setAttribute("title","change");

また、この値を設定することができます

div.id="some";
div.title="other";

div.myColor="blue";
alert(div.getAttribute("myColor"));//null

removeAttribute（）メソッドは、完全にこの属性を削除するために使用されます。

div.removeAttribute("class")

プロパティを4.attributes

5.要素を作成します。

要素を作成する方法は次のとおりです。

var newele=document.createElement("标签名")；

プロパティ要素を追加する方法を作成するもう1つの方法

var newele=document.createElement("<div id=\"newId\"></div>")；

文書の数に新しい要素を追加します：

document.appendChhild(newele);

6.要素の子

要素ののchildNodes属性は、その子ノードのすべてが含まれ、これらのノードは、要素、テキストノード、コメント、または処理命令かもしれません。しかし、異なるブラウザは異なる持っています。

<ul id="aul">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

IEのいくつかの以前のバージョンでは、上記のは、他のブラウザは、彼らがULのli要素は3つのノードと4つのテキストノードが含まれると考えている7つのノードが、あると思いながら、UL李ノードは、3つのノードがあると見なされます

もし

<ul id="aul"><li>item 1</li><li>item 2</li><li>item 3</li></ul>

時間の長さのすべてと同じように、このようなブラウザが返されます。

なお、上記から得ることができる。我々は、子ノードの要素を横断するとき、順番に正確ノード動作中の要素は、我々はノード一度アクションタイプを実行する前に検出する必要があります。

var ul=document.getElementById('aul');
        alert(ul.childNodes.length);
        for(var i=0;i<ul.childNodes.length;i++){
            if(ul.childNodes[i].nodeType==1)
            {
                alert(i+":"+ul.childNodes[i].nodeName);
                //1:li
                //3:li
                //5:li
            }
        }