[Javascript log]ドキュメント(2)

15771 ワード
テキストリンク
プライマリノード構成
DOMノードは、異なるタイプのPropertyをサポートします.ラベル(<a>対応要素ノードはリンク関連propertyを提供し、<input>対応要素ノードは入力関連propertyを提供する)が、すべてのDOMノードは共通の祖先によって作成されるため、ノードタイプは異なるが、すべてのDOMノードは共通のpropertyおよびメソッドをサポートする.DOMノードには、異なるタイプの対応する組み込みクラスがあります.階層の上部にEventTargetがあり、NodeはEventTargetを継承し、他のDOMノードはNodeクラスを継承します.

1)EventTarget:ルートディレクトリ内の抽象クラスで、実際にはそのクラスに対応するオブジェクトは作成されません.すべてのDOMノードに基づいているため、イベントはDOMノードで使用できます.
2)Node:DOMノードの基礎となる抽象クラス.getterとして機能するparentNode、nextSibling、childNodesなどの主要なツリーナビゲーション機能が提供されます.ノードクラス内のオブジェクトは絶対に作成されません.しかし、この等級を受け継いだのはいくつかの等級がある.テキストノードのテキストクラスと要素ノードのElementクラス、およびアノテーションノードのCommentクラスはNodeクラスを継承します.
3)Element:DOM要素のベースクラス.nextElementSibling、ChildrentまたはgetElementsByTagName、querySelectorなどの要素専用ナビゲーションを支援するプロフェッショナルまたはメソッドガイドは、これに基づいています.ブラウザはHTMLだけでなく、XMLとSVGもサポートしています.Elementクラスは、それに関連するSVGEElement、XML Element、HTML Elementクラスの基礎です.
4)HTML Element–HTML要素ノードのベースとなるクラス.以下に示すクラスは、実際のHTML要素に対応し、HTML Elementを継承します.
HTML InputElement–<input>要素に対応するクラス
HTML BodyElement–<body>要素に対応するクラス
HTML AnchorElement–<a>要素に対応するクラス
instanceofを使用して継承するかどうかを確認できます.
NodeNameまたはtagname propertyを使用して、DOMノードのタグ名を識別します.
InnerHTMLプロパティを使用すると、要素内のHTMLを文字列で受信できます.
<body>
  <p>p 태그</p>
  <div>div 태그</div>

  <script>
    alert( document.body.innerHTML ); // 내용 읽기
    document.body.innerHTML = '새로운 BODY!'; // 교체
  </script>

</body>
elem.innerHTML+=「HTMLを追加」では、要素にHTMLを追加できます.既存のコンテンツを削除し、既存のコンテンツと新しいコンテンツを統合します.=>イメージなどのリソースはすべて再ロードされます.
chatDiv.innerHTML += "<div>안녕하세요<img src='smile.gif'/> !</div>";
chatDiv.innerHTML += "잘 지내죠?";
外部HTML property要素にはHTML全体が含まれています.outerHTMLはinnerHTMLに要素自体が追加されていると考えられます.
<div id="elem">Hello <b>World</b></div>

<script>
  alert(elem.outerHTML); // <div id="elem">Hello <b>World</b></div>
</script>
=>>DOMの要素を置き換えます.
テキストノードなどの他のタイプのノードでは、innerHTMLと同様のproperty nodeValueとdataを使用する必要があります.
<body>
  안녕하세요.
  <!-- 주석 -->
  <script>
    let text = document.body.firstChild;
    alert(text.data); // 안녕하세요.

    let comment = text.nextSibling;
    alert(comment.data); // 주석
  </script>
</body>
textContentは純粋なテキストのみにアクセスします.ラベル以外はテキストのみ抽出します.innerHTMLは、要素内のHTML(タグを含むこともできる)を文字列形式で受信することができる.
hidden propertyは、要素を表示するかどうかを指定するために使用できます.
<div>아래 두 div를 숨겨봅시다.</div>

<div hidden>HTML의 hidden 속성 사용하기</div>

<div id="elem">자바스크립트의 hidden 프로퍼티 사용하기</div>

<script>
  elem.hidden = true;
</script>
属性と属性
ブラウザがWebページに遭遇すると、HTML生成DOMオブジェクトが読み込まれます.要素ノードでは、ほとんどの標準HTML属性(attribute)がDOMオブジェクトのpropertyです.
document.body.myData = {
  name: 'Caesar',
  title: 'Imperator'
};

alert(document.body.myData.title); // Imperator
document.body.sayTagName = function(){
  alert(this.tagName);
}

document.body.sayTagName();
ただし、非標準属性はPropertyに変換できません.
=>メソッド
elem.hasAttribute(name)-属性が存在するかどうかを確認します
elem.getAttribute(name)-属性値の取得
elem.setAttribute(name,value)-属性値の変更
elem.removeAttribute(name)-属性値の消去
HTML属性フィーチャー
-大文字と小文字を区別しない=>idとIDは同じ
-値は常に文字列です.
文字列は大文字と小文字を区別します.
標準属性が変化すると、対応するプログラムが自動的に更新されます.場合によってはpropertyが変化すると、プロパティも更新されます.でもinputvalueのように、同期がプロパティ内でproperty方向にのみ発生する例外もあります.
DOMプロパティは必ずしも文字列ではありません.チェックボックスの入力に使用します.checked propertyの場合、と呼ばれる値があります.
<input id="input" type="checkbox" checked> checkbox

<script>
  alert(input.getAttribute('checked')); // 속성 값: 빈 문자열
  alert(input.checked); // 프로퍼티 값: true
</script>
ドキュメントの変更
要素の作成
let div = document.createElement('div);
let textNode = document.createTextNode('안녕하세요');
// 1. <div> 요소 만들기
let div = document.createElement('div');

// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";

// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

docuement.body.append(div);
node.append(ノードまたは文字列)–ノードの最後にノードまたは文字列を挿入します.
node.prepend(ノードまたは文字列)–ノードの前にノードまたは文字列を挿入します.
node.before(ノードまたは文字列)–ノードの前にノードまたは文字列を挿入します.
node.after(ノードまたは文字列)–ノードの後にノードまたは文字列を挿入します.
node.「Withの置き換え」(Replace With)-ノードを新しいノードまたは文字列で置き換えます.
elem.InsertAdjacentHTML(where,html)では、最初のパラメータのelemに対する位置は、次のいずれかでなければなりません.
「beforceregin」–elemの直前にhtmlを挿入します.
「afterbegin」–elemの最初のサブエレメントの前にhtmlを挿入します.
「beforefend」–elemの最後のサブエレメントの後にhtmlを挿入します.
「afterend」–elemの後にhtmlを挿入します.
<div id="div"></div>
<script>
  div.insertAdjacentHTML('beforebegin', '<p>안녕하세요.</p>');
  div.insertAdjacentHTML('afterend', '<p>안녕히 가세요.</p>');
</script>

node.removeノードの削除を許可
elem.cloneNode(true)を呼び出すと、elemの深度(Depth)コピーが作成されます.すべての属性とすべてのサブ要素をコピーします.elem.cloneNode(false)を呼び出すと、子孫ノードはコピーされずにelemのみがコピーされます.
win 7 mysql starting the serverエラー解決策のインストール
[Android Studio]runOnUiThread