DOM ノード属性に関する知識ポイントを要約して共有する-jsチュートリアル-php.cn

この記事では、javascript に関する関連知識を提供します。主に DOM ノードの属性に関連する問題を紹介します。DOM ノードの属性はクラスによって異なります。一緒に見てみましょう。助けるために。

DOM ノード属性に関する知識ポイントを要約して共有する

[関連する推奨事項: JavaScript ビデオチュートリアル、Web フロントエンド ]

前の記事を読んだ後記事 DOM を勉強し、ある程度理解します。ただし、これは DOM の基本的な知識にすぎず、DOM についてさらに詳しく知りたい場合は、DOM ノードについてさらに深く理解する必要があります。このセクションでは、DOM のノード属性、ラベル、コンテンツに焦点を当てます。それでは、それらが何であるかについてもっと知ることができるでしょうか?そしてそれらの最も一般的なプロパティ。

DOM ノードクラス

DOM ノードのプロパティは、その class(class) によって異なります。たとえば、<a></a> タグは、要素ノードとリンク a に関連する属性に対応します。テキストノードは要素ノードとは異なりますが、すべての DOM ノードが DOM ツリーを形成するため、同じプロパティとメソッドを持ちます。

各 DOM ノードは、対応する組み込みクラスに属します。

root は DOM ツリーの EventTarget であり、Node によって継承され、他の DOM ノードもそれを継承します。

次の図は、理解を容易にするのに役立ちます:

DOM ノード属性に関する知識ポイントを要約して共有する

DOM ノードの主なクラスは次のとおりです:

##EventTarget: root抽象クラスです。このクラスのオブジェクトは決して作成されません。これは基礎として機能するため、すべての DOM ノードはいわゆるイベント (イベント) をサポートします。これについては後で説明します。
Node:これは、DOM ノードの基礎として機能する抽象クラスでもあります。これはコア機能を提供します: parentNode、nextSibling、childNodes など (これらは getter)。ノードクラスのオブジェクトは作成されません。ただし、それを継承する特定のノードクラスがいくつかあります。たとえば、テキストノードの Text、要素ノードの Element、コメントノードの Comment などです。 .
Element: DOM 要素の基本クラスです。 nextElementSibling、childern、getElementsByTagName、querySelector などの要素レベルの検索を提供します。ブラウザには HTML だけでなく、XML や SVG ドキュメントも存在します。要素クラスは、SVGElement、XMLElement、HTMLElement などのより具体的なクラスの基礎となります。
HTMLElement: HTML 要素の基本クラスであり、さまざまな HTML 要素によって継承されます。たとえば、HTMLInputElemnt (input 要素のクラスに対応)、HTMLBodyElement (body 要素のクラスに対応)および HTMLAnchorElement (a 要素のクラスに対応) など。

HTMLElement クラスの場合、以下の図に示すように、他にも多くのタイプがあります。

DOM ノード属性に関する知識ポイントを要約して共有する

# したがって、 ノードのすべてのプロパティとメソッドは継承の結果です。

たとえば、DOM オブジェクトの <input> 要素。これは、HTMLElement クラスの HTMLInputElement クラスに属します。プロパティとメソッドをスタックします:

HTMLInputElement: input 指定されたプロパティを提供します
HTMLElement: 一般的に使用される HTML 要素メソッド (getter および setter)
Element を提供します。 : 要素の共通メソッドを提供します
Node: パブリック DOM ノード属性を提供します
EventTarget : イベントのサポートを提供します (オーバーライド)
最後に、hasOwnProperty などの Object
(純粋なオブジェクト) のメソッドを継承します。

DOM ノードクラス名を確認したい場合は、一般的に使用されるオブジェクトの constructor 属性を使用できます。これはクラスコンストラクターを参照し、その name は constructor.name を使用して取得できます。例:

DOM ノード属性に関する知識ポイントを要約して共有する

または、toString を使用して文字列にまとめます。例:

DOM ノード属性に関する知識ポイントを要約して共有する

また、継承は instanceof:

DOM ノード属性に関する知識ポイントを要約して共有する

を使用してチェックできます。ご覧のとおり、DOM ノードは通常の JavaScript オブジェクトです。継承にはプロトタイプベースのクラスを使用します。

console.dir(elem) を使用して要素をブラウザに出力することも簡単です。コンソールに HTMLElement.prototype、Element.prototype などが表示されます。

DOM ノード属性に関する知識ポイントを要約して共有する

DOM ノードタイプ

ブラウザと DOM に関するセクションでは、ブラウザが HTML ドキュメントを DOM モデルに基づいて一連のノードに解析することがわかりました。これらのノードは DOM ツリーを形成します。 DOM の最小の構成単位は ノード (Node) と呼ばれ、DOM ツリーは 12 種類のノードで構成されます。

DOM 内のノードには、nodeType、nodeName、nodeValue という少なくとも 3 つの基本属性があります。これら 3 つの属性の値はノードの種類によって異なります。

#nodeType: このプロパティは、ノードタイプの定数値を返します。異なるタイプは異なる定数値に対応しており、以下の表 に示すように 1 から
12
##nodeName: このプロパティはノードの名前
nodeValue:このプロパティは、現在のノードの値を文字列

nodeTypeノードタイプ: の形式で返すか、設定します。

DOM ノード属性に関する知識ポイントを要約して共有する

その中には、

要素ノード、テキストノードがあります。 および 属性ノード は、DOM の操作に使用する最も一般的なノードタイプです。
JavaScript では、

instanceof

やその他のクラスベースのテストを使用してノードタイプを確認できますが、場合によっては nodeType の方が簡単な場合もあります。

DOM ノード属性に関する知識ポイントを要約して共有するそして、

nodeType

は単なる属性であり、変更することはできません。

DOM ノード属性に関する知識ポイントを要約して共有する DOM ノードタグ

前述したように、

nodeName

はノード名を返します (HTML タグが返され、大文字で示されます)。）。つまり、特定の DOM ノードのタグ名は、nodeName 属性に加えて、次のような nodeName 属性を通じて読み取ることができます。

tagName

属性を読み取ることもできます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">document.body.nodeName // => BODY</pre><div class="contentsignin">ログイン後にコピー</div></div>nodeName と

tagName

の両方で要素のタグ名を読み取ることができますが、 2 違いはありますか？もちろん、この 2 つには若干の違いがあります:<ul class="list-paddingleft-2" style="list-style-type:square;"><li><p style="line-height:2em;"><code style="font-family:monospace, monospace;font-size:1em;">tagName属性只能用于元素节点（Element）

nodeName属性可以用于任意节点（Node）上，如果用于元素上，那么和tagName相同，如果用于其他节点类型，比如文本、注释节点等，它有一个带有节点类型的字符串

也就是说，tagName只支持元素节点（因为它源于Element类），而nodeName可以用于所有节点类型。比如下面这个示例，来比较一下tagName和nodeName的结果：

DOM ノード属性に関する知識ポイントを要約して共有する

如果我们只处理DOM元素，那么我们就可以选择tagName属性来做相应的处理。

除了XHTML，标签名始终是大写的。浏览器有两种处理文档的模式：HTML和XML。通常HTML模式用于Web页面。当浏览器接收到一个带有Content-Type:application/xml+xhtml的头，就会启用XML模式。在HTML模式中，tagName或者nodeName总是返回大写标签，比如<body>或<BoDy>返回的是BODY；对于XML模式，现在很少使用了。

DOM节点内容

对于DOM节点的内容，JavaScript中提供了几个方法来对其进行操作，比如innerHTML、outerHTML、textContent、innerText、outerText和nodeValue等。接下来，咱们看看他们的使用场景以及相应的差异性。

为了易于帮助大家理解和掌握这向方法的使用，接下来的示例都将围绕着下面这个DOM结构来做处理：

<body>    
<!-- 主内容 -->    
<div id="main">        
<p>The paragraph element</p>        
<div>The div </div>        
<input type="text" id="name" value="User name" />    
</div>
</body>

ログイン後にコピー

`innerHTML`

innerHTML属性允许我们获取元素的HTML，而且其获取的的值是一个String类型。比如：

let ele = document.getElementById(&#39;main&#39;)
let eleContent = ele.innerHTML; console.log(typeof eleContent, eleContent)

ログイン後にコピー

输出的结果如下：

DOM ノード属性に関する知識ポイントを要約して共有する

上面看到的是innerHTML属性获取某个元素的内容，当然innerHTML也可以修改某个元素的内容。比如：

let eleP = document.querySelector(&#39;p&#39;) eleP.innerHTML = &#39;我是一个段落，新修改的内容：<a href="#">我是一个链接</a>&#39;

ログイン後にコピー

刷新页面，段落p元素整个内容都将被修改了：

DOM ノード属性に関する知識ポイントを要約して共有する

如果使用innerHTML将<script>标签插入到document，它不会被执行。

使用innerHTML可以使用ele.innerHTML += "something"来追回更多的HTML，比如下面这个示例：

let eleP = document.querySelector(&#39;p&#39;) eleP.innerHTML += &#39;我是一个段落，新修改的内容：&#39; eleP.innerHTML += &#39;<a href="#">我是一个链接</a>&#39;

ログイン後にコピー

结果如下：

DOM ノード属性に関する知識ポイントを要約して共有する

使用innerHTML要非常小心，因为它做的不是加法，而是完整的覆盖。还有：

当内容为“零输出”（zeroed-out）和从头重写时，所有的图像和其他资源将被重新加载。

`outerHTML`

outerHTML属性包含元素的全部HTML。就像innerHTML的内容加上元素本身一样。从文字难于理解或想象的话，咱们把上面的示例修改一下，通过innerHTML和outerHTML的结果来看其获取的是什么：

let eleP = document.querySelector(&#39;p&#39;)
let eleInner = eleP.innerHTML
let eleOuter = eleP.outerHTML console.log(&#39;>>> innerHTML >>>&#39;, eleInner) console.log(&#39;>>> outerHTML >>>&#39;, eleOuter)

ログイン後にコピー

输出的结果：

DOM ノード属性に関する知識ポイントを要約して共有する

outerHTML和innerHTML也可以写入，但不同的是：

innerHTML可以写入内容，改变元素，但outerHTML在外部环境中取代了整体!

比如下面这个示例：

let eleP = document.querySelector(&#39;p&#39;) eleP.outerHTML = &#39;<div class="new">把整个p元素换成div元素</div>&#39;

ログイン後にコピー

DOM ノード属性に関する知識ポイントを要約して共有する

从效果和页面源码上截图可以看出来，p替换了p。

outerHTML赋值不修改DOM元素，而是从外部环境中提取它，并插入一个新的HTML片段，而不是它。新手时常在这里会犯错误：修改eleP.outerHTML，然后继续使用eleP，就好像它有新的内容一样。

let eleP = document.querySelector(&#39;p&#39;) eleP.outerHTML = &#39;<div class="new">把整个p元素换成div元素</div>&#39; console.log(eleP.innerHTML)

ログイン後にコピー

DOM ノード属性に関する知識ポイントを要約して共有する

我们可以写入outerHTML，但是要记住，它不会改变我们写入的元素。相反，它会在它的位置上创建新的内容。我们可以通过查询DOM获得对新元素的引用。比如：

let eleP = document.querySelector(&#39;p&#39;) eleP.outerHTML = &#39;<div class="new">把整个p元素换成div元素</div>&#39; console.log('>>>> ', eleP) let newEle = document.querySelector('.new') console.log('>>>> ', newEle)

ログイン後にコピー

结果如下：

DOM ノード属性に関する知識ポイントを要約して共有する

`textContent`

textContent属性和innerHTML以及outerHTML都不一样。textContent只获取元素的纯文本内容，包括其后代元素的内容。比如：

let mainEle = document.querySelector(&#39;#main&#39;) console.log(&#39;>>>> innerHTML >>>>&#39;, mainEle.innerHTML) console.log(&#39;>>>> outerHTML >>>>&#39;, mainEle.outerHTML) console.log(&#39;>>>> textContent >>>>&#39;, mainEle.textContent)

ログイン後にコピー

结果如下：

DOM ノード属性に関する知識ポイントを要約して共有する

正如我们所看到的，textContent返回的只有文本内容，就像是把所有HTML元素的标签都删除了，但是它们的文本仍然保留着。正如上面示例中的，innerHTML、outerHTML和textContent输出的结果，可以一目了然知道他们之间的差异性。

textContent和其他两个属性一样，也可以写入内容。但对于textContent的写入更为有用，因为它写入的内容是纯内容，是一种安全方式。而innerHTML和outerHTML都会写入HTML，而会写入HTML标签的方式是一种不安全的形式，容易引起Web的XSS攻击。

XSS我们先忽略，来看看写入的差异性：

let mainEle = document.querySelector(&#39;#main&#39;) let content = "我要新内容，并带有一个标签：<b>Boo,Waa!!!</b>" mainEle.textContent = content mainEle.innerHTML = content mainEle.outerHTML = content

ログイン後にコピー

效果如下：

DOM ノード属性に関する知識ポイントを要約して共有する

如果你够仔细的话，会发现，name中的<b>Boo,Waa!!!</b>的<body>标签也被当做文本内容写进去了。如下图所示：

DOM ノード属性に関する知識ポイントを要約して共有する

大多数情况之下，我们希望从用户那里得到文本，并希望将其视为文本。我们不希望在我们的网站上出现意想不到的HTML，那么textContent就可以得到你想要的。

`innerText`和`outerText`

innerText和outerText是IE的私有属性，获取的也是元素的文本内容，有点类似于textContent。所以这里只简单的提一提，并不深入展开。如果这里有误，请大大们指正。

`nodeValue`和`data`

innerHTML属性仅对元素节点有效。

其他节点类型有对应的节点：nodeValue和data属性。这两种方法在实际应用中几乎是相同的，只有很小的差异。来看看示例。

<body>    
Hello JavaScript!!!!    
<!-- 主内容 -->    
<div id="main">        
<p>The paragraph element</p>        
<div>The div </div>        
<input type="text" id="name" value="User name" />    
</div>    
<script>        
console.log(&#39;>>> nodeValue >>>&#39;, document.body.firstChild.nodeValue)        console.log(&#39;>>> data >>>&#39;, document.body.firstChild.data)    
</script>
</body>

ログイン後にコピー

他们输出的结果是相同的：

DOM ノード属性に関する知識ポイントを要約して共有する

总结

每个DOM节点属于某个类。这些类构成一个DOM树。所有的属性和方法都将被继承。主要的DOM节点属性有：

nodeType：我们可以从DOM对象类中获取nodeType。我们通常需要查看它是否是文本或元素节点，使用nodeType属性很好。它可以获取对应的常数值，其中1表示元素节点，3表示文本节点。另外，该属性是一个只读属性。
nodeName / tagName：tagName只用于元素节点，对于非元素节点使用nodeName来描述。它们也是只读属性。
innerHTML：获取HTML元素的内容（包括元素标签自身）。其可以被修改。
outerHTML：获取元素完整的HTML。outerHTML并没有触及元素自身。相反，它被外部环境中的新HTML所取代。
nodeValue / data：非元素节点的内容（文本、注释）。这两个几乎是一样的，不过我们通常使用data。
textContent：获取元素内容的文本，基本上是HTML减去所有的标签。它也具有写入特性，可以将文本放入元素中，所有特殊的字符和标记都被精确的处理为文本。