English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

jsの基本：DOMの要素オブジェクトの属性およびメソッドの詳細

HTML DOM（ドキュメントオブジェクトモデル）では、各部分がノードです。

ノードはDOM構造の中で最も基本的な構成単位であり、すべてのHTMLタグがDOM構造のノードです。

ドキュメントは……ドキュメントノードです

すべてのHTML要素は……要素ノードです

すべてのHTML属性は……属性ノードです

テキストはHTML要素に挿入される……テキストノードです

コメントは……コメントノードです

最も基本的なノードタイプはNodeタイプであり、すべての他のタイプはNodeから派生しています。DOM操作はJavaScriptで最も負荷が高い部分であり、そのためNodeListがもたらす問題が最も多く発生します。注意：NodeListは「動的な」です。つまり、NodeListオブジェクトにアクセスするたびに、クエリが一度実行されます。これによりコストが増加しますが、新しいノードがNodeListでアクセス可能になることを保証できます。

すべての要素ノードには共通の属性とメソッドがあります。詳しく見てみましょう：

まず、よく使われる一般的な属性を見てみましょう

1　 element.id : 要素のidを設定または返します

2　 element.innerHTML : 要素の内容を設定または返します。子タグや内容も含まれます

3　 element.innerText : 要素の内容を設定または返します。子タグや内容は含まれません

4　 element.className : 要素のクラス名を設定または返します

5　 element.nodeName : このノードの大文字のタグ名を返します

6　 element.nodeType : このノードのノードタイプを返します1要素ノードを示す　 2属性ノードを示す……

7　 element.nodeValue : このノードのvalue値を返します。要素ノードのこの値はnullです

8　 element.childNodes : 要素の子ノードのnodeslistオブジェクトを返します。nodelistは配列に似ており、length属性があり、インデックスの指定された値にアクセスできます（item(index)メソッドも使用できます）。ただし、nodelistは配列ではありません。

9　 element.firstChild : 要素の最初の子を返します/element.lastChild : 要素の最初の子を返します/最後の子ノード（コメントノードとテキストノードも含みます）

10　 element.parentNode : このノードの親ノードを返します

11　 element.previousSibling : 現在のノードと同じレベルの前のノード（コメントノードとテキストノードも含みます）を返します

12　 element.nextSibling : 現在のノードと同じレベルの次のノード（コメントノードとテキストノードも含みます）を返します

13　 element.chileElementCount : 子要素（不包括文本节点和注释节点）の数を返します

14　 element.firstElementChild /lastElementChild 返回第一个/最后一个子元素(不包括文本节点以及注释节点)

15　 element.previousElementSibling/nextElementSibling　 返回前一个/后一个兄弟元素(不包括文本节点以及注释节点)

16　 element.clientHeight/clientWidth　 返回内容的可视高度/宽度（不包括边框，边距或滚动条）

17　 element.offsetHeight/offsetWidth /offsetLeft/offset/Top 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)

18　 element.style　 设置或返回元素的样式属性,。示例：element.style.backgroundColor　 注意，与CSS不同，style的属性要去掉横杠，第二个单词　　首字母要大写

19　 element.tagName　 返回元素的标签名(大写)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
      border: 5px solid rebeccapurple;
      background-color: antiquewhite;
      width: 440px;
      height: 120px;
      position: relative;
      left: 20px;
      top:20px;
      margin:10px;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
      text-indent: 40px;
    }
  </style>
</head>
<body>
  <form id='first_form' class="form_style" name="cangjingge">
    功法を選んでください：<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠、三思してください！！！</p><!--注释标签-->
  <p>推荐功法-->葵花宝典</p>
  <script>
    //jsデモコードはここに追加してください
    var a=document.getElementById('first_form'),
      b = document.getElementsByTagName('p')[0];
    console.log(a.id);
    console.log(a.innerHTML);
    console.log(a.className);
    console.log(a.childNodes);
    console.log(a.firstChild);
    console.log(a.lastChild);
    console.log(a.nodeName);
    console.log(a.nodeType);
    console.log(a.nodeValue);
    console.log(a.parentNode);
    console.log(a.clientHeight);
    console.log(a.offsetHeight);
    console.log(b.nextSibling);
    console.log(b.nextElementSibling);
  </script>
</body>
</html>

ブラウザの表示結果：

さらに、特定の専用属性もあります

専用属性とは、特定のタグにのみ属する属性のことです。例えば、<a>タグにはhrefとtarget属性があります。<img>にはsrc属性があり、<form>にはentypeおよびaction属性があります……

a_element.href　 現在のノードが指しているハイパーリンクを返します

次に、一般的によく使われる一般的なメソッドを見てみましょう：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>
</head>
<body>
  <form id='first_form' class="form_style" name="cangjingge">
    功法を選んでください：<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠、三思してください！！！</p>
  <script>
    //jsデモコードはここに追加してください
  </script>
</body>
</html>

(以下のすべてのJavaScriptデモコードは、本文書のサンプルHTMLコードを実験対象としています)

1　 element.appendChild(nodeName)　　 要素に新しい子ノードを追加し、最後の子ノードとして返します。HTML DOMに新しい要素を追加するには、まずその要素を作成し、それを既存の要素に追加する必要があります。

jsデモコード：

var a=document.getElementById('first_form');   
var textnode=document.createTextNode("慎重に選択してください");  
a.appendChild(textnode)

2　 element.getAttribute(para)　　 要素ノードの指定された属性値を返します。

jsデモコード：

var a=document.getElementById('first_form');
console.log(a.getAttribute('name'))      //コンソール出力nameの値

3　 element.getAttributeNode(para)　　 指定された属性ノードを返します。

jsデモコード：

var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //コンソール出力name属性ノード

4　 element.getElementsByTagName(para) 指定されたタグ名を持つすべての子要素の集合を返します。

jsデモコード：

var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //コンソール出力

5　 element.hasAttribute(para)　 要素が指定された属性を持っている場合trueを、それ以外の場合falseを返します。

jsデモコード：

var a=document.getElementById('first_form');
console.log(a.hasAttribute('name'))      //コンソール出力

6　 element.insertBefore(insertNode,appointedNode)　 指定された既存の子ノードの前に新しいノードを挿入します。

jsデモコード：

var a=document.getElementById('first_form');
    var inputList=document.getElementsByTagName('input');
    var newNode=document.createElement('input');
    var newNode2=document.createTextNode('天马流星拳');
    var br=document.createElement('br');
    newNode.type='radio';
    newNode.name='gongfa';
    newNode.value='tmlxq';
    a.insertBefore(newNode,inputList[2]);
    a.insertBefore(newNode2,inputList[3]);
    a.insertBefore(br,inputList[3]);

7　 element.removeAttribute(); 指定属性を要素から削除します。

jsサンプルコード：

var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))

8　 element.removeChild()　　 要素から子ノードを削除します。削除されたノードはドキュメントツリーには存在しないが、実際にはメモリにまだ残っており、いつでも参照することができます。

jsサンプルコード：

var a=document.getElementById('first_form');
    a.removeChild(a.childNodes[3]);

9　 element.replaceChild(newNode,replaceNode)　 指定されたノードを新しいノードに置き換えます。

10　 element.setAttribute(attrName,attrValue)　 指定された属性を指定された値に設定または変更します。

jsサンプルコード：

var a=document.getElementById('first_form');
    a.setAttribute('name','shaolinsi');
    console.log(a.name)

11　 element.setAttributeNode()　　　 指定された属性ノードを変更します

jsサンプルコード：

var a=document.getElementById('first_form');
    var attr = document.createAttribute('id');
    attr.value='the_first';
    a.setAttributeNode(attr);
　　　　 console.log(a.id)

12　 nodelist.item() 指定されたインデックスに位置するノードを NodeList から返します。

jsサンプルコード：

var a=document.getElementsByTagName('input')
console.log(a.item(2))

これで、編集者が皆さんに提供したjsの基本のDOM中の要素オブジェクトの属性とメソッドの詳細な内容がすべてです。皆さん、ガイドのサポートと応援をお願いします~

基本教程
おすすめ