ホームページ  >  記事  >  ウェブフロントエンド  >  JS は DOM ノードを追加、削除、変更、確認します

JS は DOM ノードを追加、削除、変更、確認します

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-30 09:23:513086ブラウズ

今回は、JSを使用してDOMノードを追加、削除、変更、確認する際の注意事項を紹介します。以下で実際のケースを見てみましょう。

DOM の意味: DOM は、ブラウザー プログラミングに基づいた一連の API インターフェイスであり、Web ページが読み込まれるときに JS にノードを操作する機能を提供します。ブラウザはページのドキュメント オブジェクト モデルを作成します。

ノード: W3C の HTML DOM 標準に従って、HTML ドキュメント内のすべてのコンテンツは 1 つのノードです。 1. ドキュメント全体が 1 つのドキュメント ノードです。各ノードは HTML 要素

です。

3. HTML 要素内のテキストは
属性ノードです。したがって、HTML DOM は HTML になります。は、ノード ツリーと呼ばれるツリー構造とみなされます。 HTML DOM を通じて、ノード ツリー内のすべてのノードにアクセスできます。

1. ノードを作成し、ノード
1 を追加します。 code>createElement (ラベル名) は要素ノード (特定の要素) を作成します

2. appendChild (node) ノードを追加します

3. text content)テキストノードを作成します

var op = document.createElement("p");//创建一个p元素,因为是document对象的方法。
var opText = document.createTextNode("666");//创建一个文本节点内容是“666”,因为是document对象的方法。
op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666”
document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素

2. ノードを挿入します

1. appendChild (node) もノードを挿入することで追加できます。既存の要素。その要素を元の位置から新しい位置に移動します。 createElement(标签名)创建一个元素节点(具体的一个元素)。
2、appendChild(节点)追加一个节点。
3、createTextNode(节点文本内容)创建一个文本节点

var op = document.createElement("p");//创建一个p元素,因为是document对象的方法。
var op1 = document.getElementById("p1");
document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

二、插入节点

1、appendChild(节点)也是一种插入节点的方式,还可以添加已经存在的元素,会将其元素从原来的位置移到新的位置。
2、insertBefore(a,b)是参照节点,意思是a节点会插入b节点的前面。

var removeChild = document.body.removeChild(p1);//移除document对象的方法p1

三、删除、移除节点

1、removeChild(节点) 删除一个节点,用于移除删除一个参数(节点)。其返回的被移除的节点,被移除的节点仍在文档中,只是文档中已没有其位置了。

var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2

四、替换节点

1、replaceChild(插入的节点,被替换的节点) 2. insertBefore(a,b) は、ノードが前に挿入されることを意味します。 b ノード。

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
//nodeType是节点的类型,利用nodeType来判断节点类型,再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
  if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
    console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
  }
}

3. ノードを削除します

1. removeChild(node) によって返される削除されたノード。まだドキュメント内にありますが、その位置はドキュメント内ではなくなりました

4. ノードを置き換えます

1. replaceChild(Inserted node, replacenode) 。ノードを置換し、2 つのパラメーターを受け入れます。最初のパラメーターは挿入されるノードで、2 番目のパラメーターは置換されるノード

5 を返します。 childNodes

テキストノードと要素ノードの子ノードが含まれます。

var oList = document.getElementById('list');//oList是做的ul的对象
var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象
//通过子节点查找父节点//parentNode:获取父节点
console.log(oChild.parentNode);//在控制器日志中显示父节点
console.log(oList.children);//在控制器日志中显示oList子节点
console.log(children.length)//子节点的个数
2、

A、childrenも子ノードを取得でき、それぞれIE6-8B、parentNode

と互換性があります。 : 親ノードを取得します

//查找第一个子节点的封装函数
function firstChild(ele) {
  if (ele.firstElementChild) {//如果该条件是true则在该浏览器(IE或非IE)中兼容
    return ele.firstElementChild;
  } else {
    return ele.firstChild;
  }
}
firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色
3、A、firstChild; 最初の子ノードを見つけます。 ブラウザ互換性の問題があります: firstChild は IE と互換性がありますが、firstElementChild は IE と互換性がありません。

//查找最后一个子节点的封装函数
function lastChild(ele) {
  if (ele.lastElementChild) {//如果该条件是true则在该浏览器(IE或非IE)中兼容
    return ele.lastElementChild;
  } else {
    return ele.lastChild;
  }
}
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色
B、lastChild; lastElementChild最後の子ノードを検索します。 ブラウザ互換性の問題があります: lastChild は IE と互換性がありますが、lastElementChild は IE と互換性がありません。

//查找下一个兄弟节点的封装函数
function nextSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.nextElementSibling;
  } else {
    return ele.nextSibling;
  }
}
nextSibling(oMid).style.background = 'red';
C、nextSibling; nextElementSibling 次の兄弟ノードを検索します。 互換性の問題もあります。

//查找上一个兄弟节点的封装函数
function previousSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.previousElementSibling;
  } else {
    return ele.previousSibling;
  }
}
previousSibling(oMid).style.background = 'red';
D、

previousSibling

;

previousElementSibling前の兄弟ノードを検索します。 互換性の問題
もあります。

rrreee

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書

🎜 JS で一般的に使用される数学関数は何ですか? 🎜🎜🎜🎜🎜カスタムコンポーネントでv-modelを有効にするvueの操作方法🎜🎜🎜

以上がJS は DOM ノードを追加、削除、変更、確認しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。