JAvascript html要素の内容にアクセス(1)

3145 ワード

JavaScript 元素内容

html要素の形式は次のとおりです.

<p id="my_p">I'm <strong>BIG</strong> panda!!!</p>

そのコンテンツを取得するには、すべてのサブコンテンツを取得したり、そのサブコンテンツのtext純テキストIDを取得したり、オブジェクト方式でサブコンテンツを取得したりする3つの方法があります.
要素オブジェクトのinnerHTMLプロパティを文字列タグとして使用して、その内容を返すことができます.

my_p.innerHTML;
//   I'm <strong>BIG</strong> panda!!!

html 5はまた、outerHTMLプロパティを標準化し、要素自体のタグを含む文字列の内容を返します.

my_p.outerHTML;
//   <p id="my_p">I'm <strong>BIG</strong> panda!!!</p>

html 5を標準化するもう1つの方法は、指定した要素の「隣接」位置に任意のhtmlタグ文字列を挿入するinsertAdjacentHTML()です.この方法には2つのパラメータがあり,1つ目は挿入要素の相対位置を表し,2つ目は挿入するタグ文字列である.最初のパラメータには、次の値があります.「beforebegin」、「afterbegin」、「beforeend」、「afterend」は、次の図のような挿入位置を表します.
もう1つのケースでは、純粋なテキストの内容を取得するだけで、要素オブジェクトのtextContentプロパティを使用して実現できます.

my_p.textContent;
//   "I'm BIG panda!!!"

最後の方法は、オブジェクトでサブエレメントを取得することです.サブエレメントを直接巡回することができます.

for(var elt = my_p.firstChild;elt!=null;elt=elt.nextSibling){
//do something with elt

使いやすいように、この機能を実現する方法を包装することができます.

HTMLElement.prototype.elements = function(){
  var elts = [];
  for(let elt = this.firstChild;elt!=null;elt=elt.nextSibling){
    elts.push(elt);
  }
  return elts;
};

my_p.elements();
/*   [<TextNode textContent="I'm ">, strong, <TextNode textContent=" panda!!!">] */

また、インラインのscript要素(すなわちsrc属性がない)には、テキストを取得するためのtext属性があります.もちろんinnerHTMLでも大丈夫です.ブラウザにはscript要素の内容は表示されず、html解釈器はスクリプトのカッコとアスタリスクを無視します.これにより、script要素はページに任意のテキストコンテンツを埋め込む理想的な場所となります.要素のtype属性を「text/x-custom-data」などの値に設定するだけで、スクリプトが実行不可能なjsコードであることを明記します.これを行うと、js解釈器はスクリプトを無視しますが、要素はドキュメントツリーに存在し、textプロパティは値を返します.

mtime,atime,ctimeの違い

JavaScriptビルドオブジェクト---->Array