DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口);
DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;
一 DOM介绍
D(文档):可以理解为整个Web加载的网页文档;
O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象;
M(模型):可以理解为网页文档的树形结构;
1.节点
加载HTML页面时,Web浏览器生成一个树形结构,用来表示页面内部结构;
DOM将这种节点结构理解为由节点组成;
html元素为根节点;head元素是html的子节点;meta元素和title元素之间是兄弟关系;
2.节点种类:元素节点/文本节点/属性节点
メソッド
getElementById() 特定の ID 要素のノードを取得します;
getElementsByTagName() 同じ要素のノードリストを取得します;
getElementsByName() 同じ名前を持つノードのリストを取得します;
getAttribute() 特定の要素のノード属性の値を取得します;
setAttribute() 特定の要素のノード属性の値を設定します。
RemoveAttribute() は、特定の要素のノード属性を削除します。
1.getElementById()
//メソッドはパラメータを受け取ります: 要素の ID を取得します; // 対応する要素が見つかった場合は、その要素の HTMLDivElement オブジェクトを返します。存在しない場合は、null を返します。 Document.getElementById('box'); // [オブジェクト HTMLDivElement];
// getElementById() を通じて特定の要素ノードを取得すると、このノード オブジェクトが取得されます。 // このノード オブジェクトを通じて、その一連のプロパティにアクセスできます
(1). 要素ノードの属性にアクセスします
属性の説明
tagName 要素ノードのタグ名を取得します;
innerHTML 要素ノードのコンテンツを取得します。非 W3C DOM 仕様
Document.getElementById('box').tagName; // =>DIV;
Document.getElementById('box').innerHTML; // =>テストディビジョン;
(2).HTML 共通属性にアクセスする
属性の説明
要素ノードの ID 名;
title 要素ノードの title 属性値;
className CSS 要素のクラス;
document.getElementById('box').id; // =>id;
Document.getElementById('box').title; // タイトルを取得;
document.getElementById('box').style; // CSSStyleDeclaration オブジェクトを取得します;
document.getElementById('box').className // クラスを取得;
document.getElementById('box').bbb; // IE 以外ではサポートされていないカスタム属性の値を取得します。
2.getElementsByTagName()
//メソッドは、同じ要素名を持つノードのリストを格納するオブジェクト配列 HTMLCollection (NodeList) 配列を返します。
Document.getElementsByTagName('*'); // ワイルドカードを使用してすべての要素を取得します。
// PS: IE がワイルドカードを使用すると、ドキュメントの先頭にある HTML の仕様ステートメントが最初の要素ノードとして扱われます。
document.getElementsByTagName('li'); // =>[object HTMLCollection];すべての li 要素を取得します;
同じ名前 (名前) 設定を持つ要素を取得し、オブジェクト配列 HTMLCollection (NodeList) を返します。 Document.getElementsByName('add'); // name='add';
で入力要素のコレクションを取得します。 // PS: HTML で不正な属性については、JS によって得られる互換性が異なります。
// IE は正式な名前属性をサポートしていますが、カスタム属性との非互換性の問題が発生します。
4.getAttribute()
Document.getElementById('box').getAttribute('mydiv') // カスタム属性値を取得します;
Document.getElementById('box').mydiv; // カスタム属性値を取得します。IE でのみサポートされます。
5.setAttribute()
このメソッドは、要素に属性と値を設定します。属性名と値の 2 つのパラメーターを受け取ります。
属性自体がすでに存在する場合は上書きされます。
Document.getElementById('box').setAttribute('align','center') // 属性と値を設定します。
6.removeAttribute()
メソッドは HTML 属性を削除できます。
Document.getElementById('box').removeAttribute('style') // スタイル属性を削除します;
1.node ノード属性
//ノードは要素ノード/属性ノードとテキスト ノードに分割できます。
の 3 つの属性があります。 情報ノードの属性 ノードタイプ ノード名 ノードタイプ ノード値
要素1の要素名 null属性 属性名 属性値2 属性値
テキストの内容
Document.getElementById('box').nodeType; // =>1;
// 階層ノードは、親ノードと子ノード/兄弟ノードに分割できます。
// 要素ノードの 1 つを取得すると、階層ノード属性を使用して、その関連レベルのノードを取得できます。
階層ノード属性
属性の説明
childNodes 現在の要素ノードのすべての子ノードを読み取ります;
firstChild 現在の要素ノードの最初の子ノードを読み取ります;
lastChild 現在の要素ノードの最後の子ノードを取得します;
ownerDocument ノードのドキュメント ルート ノードを取得します。これは document;
に相当します。
parentNode 現在のノードの親ノードを取得します;
previousSibling 現在のノードの前の兄弟ノードを取得します;
nextSibling 現在のノードの次の兄弟ノードを取得します;
属性 現在の要素ノードのすべての属性ノードのセットを取得します;
(1).childNodes 属性
属性は、特定の要素ノードのすべての子ノードを取得します。これらの子ノードには、要素ノードとテキスト ノードが含まれます。
PS: childNodes[n] を使用して子ノード オブジェクトを返す場合、HTMLElement;
などの要素の子ノードを返すことができます。
また、次のようなテキスト サブノードを返すこともあります。
要素のサブノードは、nodeName または tagName を使用してタグ名を取得できます。テキストのサブノードは、nodeValue
を使用して取得できます。
var box = document.getElementById('box');
for(var i=0; i
console.log('要素ノード:' box.childNodes[i].nodeName);
テキスト ノードであると判断し、テキスト コンテンツを出力します。
}else if(box.childNodes[i].nodeType ===3){
console.log('テキスト ノード:' box.childNodes[i].nodeValue);
}
}
PS1: テキスト ノードを取得するとき (重要な点は、それが要素ノードではないということです)、テキスト コンテンツを出力するために innerHTML 属性を使用することはできません。
この非標準属性は、要素ノードに含まれるテキストを出力する前に要素ノードを取得するために使用する必要があります。
alert(box.innerHTML); innerHTML と nodeValue;
の最初の違い
PS2: innerHTML と nodeValue に値が割り当てられている場合、nodeValue はテキストに含まれる HTML を特殊文字にエスケープし、それによってプレーン テキストを形成する効果を実現します。
innerHTML はテキスト内の特殊文字を解析します。
box.childNodes[0].nodeValue = 'abc';
box.innerHTML = 'abc';
(2).firstChild 属性と lastChild 属性
firstChild = childNodes[0]; 現在の要素の最初の子ノードを取得します;
(3).ownerDocument プロパティ
ノードのドキュメント オブジェクト ルート ノードを返します。返されるオブジェクトは document;
と同等です。
alert(box.ownerDocument === document); // =>true;ルートノード;
(4).parentNode/previousSibling/nextSibling プロパティ
parentNode: このノードの親ノードを返します。
previousSibling: このノードの前の兄弟ノードを返します
nextSibling: このノードの次の兄弟ノードを返します
alert(box.parentNode.nodeName); // 親ノードのラベル名を取得します;
alert(box.firstChild.nextSibling); // 2 番目のノードを取得します;
alert(box.lastChild.previousSibling); // 最後から 2 番目のノードを取得します;
(5).attributes 属性
属性は、ノードの属性ノード コレクションを返します。
alert(document.getElementById('box').attributes); // =>NamedNodeMap;
(6) 空白のテキスト ノードを無視します
。
var body = document.getElementsByTagName('body')[0];// 获取body元素节点;
alert(body.childNodes.length); // 非IE=7; IE=3;
// PS:在非IE中,标准的DOM具有识别空白文本节点的功能,而IE自动忽略了;
function filterSpaceNode1(nodes){
// 新数组;
var ret = [];
for(var i=0; i<nodes.length; i++){
// 如果识别到空白文本节点,就不添加到数组;
if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
// 把每次的元素节点,添加到数组里;
ret.push(nodes[i]);
}
return ret;
}
// PS:上面的方法,采用忽略空白文件节点的方法,把得到的元素节点累加到数组里返回;
function filterSpaceNode2(nodes){
for(var i=0; i<nodes.length; i++){
if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)){
// 得到空白节点之后,一道父节点上,删除子节点;
nodes[i].parentNode.removeChild(nodes[i]);
}
}
return nodes;
}
// PS:firstChild等方法在获取节点时遇到空白节点,处理方法;
function removeWhileNode(nodes){
for(var i=0; i<nodes.childNodes.length; i++){
if(nodes.childNodes[i].nodeType ===3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)){
nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
}
}
return nodes;
}4 つのノードの操作
// DOM はノードを検索するだけでなく、ノードの作成/ノードのコピー/ノードの挿入/ノードの削除、ノードの置換も行うことができます
ノードの操作方法
メソッドの説明
write() このメソッドは、ドキュメントに任意の文字列を挿入できます。
createElement() 要素ノードを作成します;
appendChild() 新しいノードを子ノード リストの末尾に追加します。
createTextNode() ファイル ノードを作成します;
insertBefore() 新しいノードを前に挿入します;
replaceChild() 古いノードを新しいノードに置き換えます;
cloneNode() ノードをコピーします;
RemoveChild() ノードを削除します;
(1).write() メソッド
//write() メソッドはドキュメントに任意の文字列を挿入できます;
document.write('
これは段落です!
') // 解析されたテキスト;(3).appendChild() メソッド
appendChild() メソッドは、ノードの子ノード リストの末尾に新しいノードを追加します。
var box = document.getElementById('box');
var p = document.createElement('p'); // 新しい要素ノードを作成します
box.appendChild(p); // 新しい要素ノード
を子ノードの末尾に追加します。
(4).createTextNode() メソッド
このメソッドはテキスト ノードを作成します。
var text = document.createTextNode('段落');
p.appendChild(text); // 子ノードの末尾にテキストノードを追加します;
(5).insertBefore() メソッド
// 该方法可以把节点添加到指定节点的前面;
box.parentNode.insertBefore(p,box); // 在<div>之前添加一个<p>;
box.insertBefore(newNode,null); // 将newNode添加到box自列表的最后节点;
//PS:insertBefore()方法可以给当前元素的前面创建一个节点,但没有提供给当前元素的后面创建一个节点;
function insertAfter(newElement,targetElement){
// 得到父节点;
var parent = targetElement.parentNode;
// 如果最后一个子节点是当前元素,那么直接添加即可;
if(parent.lastChild === targetElement){
parent.appendChild(newElement);
}else{
// 否则,在当前节点的下一个节点之前添加;达成在当前节点后面添加节点的需求;
parentNode.insertBefore(newElement,targetElement.nextSibling);
}
}このメソッドは、ノードを指定されたノードに置き換えることができます。
box.parentNode.replaceChild(p,box); //
に置き換えます。
(7).cloneNode() メソッド
// このメソッドは子ノードをコピーできます。コピー後に返されるノードのコピーはドキュメントに属しますが、その親ノードは指定されていません。 // パラメーターは true です。ディープ コピーを実行します。これは、ノードとその子ノード ツリー全体をコピーします。 // パラメーターは false です。浅いコピーを実行し、ノード自体のみをコピーします。 var box = document.getElementById('box'); var clone = box.firstChild.cloneNode(true); // 最初の子ノードを取得します。true はコンテンツをコピーすることを意味します。 box.appendChild(clone); // 子ノードリストの最後に追加します;
(8).removeChild() メソッド
このメソッドは、指定されたノードを削除します。
box.parentNode.removeChild(box);
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
