JavaScriptの--DOM学習日記

含む従来のDOM操作：文書要素を取得するステップと、前記文書要素のCRUD操作; 3イベント動作...

ドキュメントのロード処理

1.問題

ブラウザがあれば、ページが、順番に上から下にロードされるロードするときにscriptラベルが書かれているhead内のコードが実行されると、ページがロードされていない、ページがJSにもたらすことができる、DOMオブジェクトをロードしていませんページのDOMオブジェクトに取得することができません。

2.ソリューション

1）onloadイベント

onloadイベントは、ページ全体をロードした後にトリガされます。するにwindowバインドonloadしますが、DOMオブジェクトのすべてを実行するための我々のコードがロードされていることを確認することができるようにイベントを、応答関数を対応するイベントは、ページのロード後に実行されます。

ボディ尾の2）スクリプトタグ

3）推奨事項：両方の組み合わせ

ドキュメントのページ要素を取得します

収集要素ID 1

var btn = document.getElementById("btn");

2.ラベル名の下に要素を取得

var btn = document.getElementsByTagName("button")[0];

3.名前に従って要素を取得します。

var btn = document.getElementsByName("btn")[0];

素子4は、クラス名を取得します。

var btn = document.getElementsByClassName("btn")[0]

選択要素の取得

// 返回第一个符合选择器的DOM节点
var btn1 = document.querySelector("#btn");
var btn2 = document.querySelector("button");
var btn3 = document.querySelector(".btn");
// 返回所有符合选择器的DOM节点的集合
var btn4 = document.querySelectorAll("#btn")[0];
var btn5 = document.querySelectorAll(".btn")[0];

ノード間の関係

すべてのコンテンツページには、その上のタグを含むノード、属性、テキスト、コメント、およびです。

1.親ノードを取得します。

var a = document.getElementsByTagName("a")[0];
var b = a.parentNode;  // 获取父节点
var c = a.parentElement;  // 获取父节点

2.兄弟を取得

var span = document.getElementById("span");
// 获取下一个兄弟节点
var nextEle = span.nextElementSibling || span.nextSibling;  // nextSibling方法获取到的节点包括换行和注释等标签  
// 获取上一个兄弟节点
var preEle = span.previousElementSibling || span.previousSibling;
// 获取任意兄弟节点
var siblings = span.parentNode.children;  // 所有的同级节点
var one = siblings[1]  // 通过索引获取任意兄弟节点

3.子ノードを取得します。

var box = document.querySelector("#box");
// 获取第一个子节点
var firstChild = box.firstElementChild || box.firstChild;
// 获取最后一个子节点
var lastChild = box.lastElementChild || box.lastChild;
// 获取所有的子节点
var children = box.childNodes;  // 包括换行、注释等子节点
var children2 = box.children;  // 所有元素子节点

4.プロパティノードのnodeType

各ノードは持っているnodeType属性は、ノードの種類を示すために使用されます。12の定数で定義されたタイプで表されるノードのノードタイプ。ここでは一般的に使用されるいくつかがあります。

定数名	一定の値	ノードタイプ	説明
Node.ELEMENT_NODE	1	素子	代表要素ノード
Node.ATTRIBUTE_NODE	2	ATTR	属性ノード
Node.TEXT_NODE	3	テキスト	要素またはテキストコンテンツ属性を代表して
Node.COMMENT_NODE	8	コメント	コメントノードを代表して
Node.DOCUMENT_NODE	9	資料	文書全体を代表して（DOMツリーのルートノード）

window.onload = function(ev) {
  // 获取标签
  var box = document.getElementById("box");
  // 获取标签内部的所有节点
  var allNodeList = box.childNodes;
  // 过滤元素节点
  var newArr = [];
  allNodeList.forEach(function(value, key, parent) {
    if (value.nodeType === 1) {
      newArr.push(value);
    }
  })
}