DOM節點中獲取文字易混淆的屬性

2022-07-03 01:36:10 字數 2228 閱讀 1242

dom 節點中對於獲取文字易混淆的屬性,innertext, innerhtml, outerhtml, textcontent, nodevalue。

乙個例項:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>innertext 與 textcontent 的區別

title

>

head

>

<

body

>

<

div

id="box"

>

我是文字節點(第乙個子節點)

<

span

id="span"

>我是span節點的文字節點

span

>

div>

<

script

>

varbox

=document.getelementbyid(

"box");

console.log(

"innerhtml:"+

box.innerhtml);

console.log(

"outerhtml:"+

box.outerhtml);

console.log(

"innertext:"+

box.innertext);

console.log(

"textcontent:"+

box.textcontent);

console.log(

"nodevalue:"+

box.nodevalue);

console.log(

"box's nodevalue of id :"+

box.getattributenode("id

").nodevalue);

script

>

body

>

html

>

結果:ie9 及以上版本下的結果:

ie8 及以下版本下的結果:

其它主流瀏覽器下的效果基本一致:

從結果可知:

1. ie8 及以下瀏覽器版本不支援 textcontent 屬性。獲取的是所有文字內容,包括了空格、換行,但不包括 html 標籤。

2. innerhtml 只針對於 element 物件,語法為 htmlelementobject.innerhtml=text。它獲取的是從該html開始標籤到結束標籤之間的全部內容,包括換行、空格,也包括 html 標籤。

3. element 物件的 nodevalue 為 null。

4. attribute 物件的 nodevalue 為其屬性值。

區別:textcontent: 設定或者返回指定節點的文字內容。ie8 及以下版本瀏覽器不支援該屬性。可以用來替換 innertext。

innerhtml: 可以用來獲取、修改指定元素內的所有標籤和內容(包括了 html 標籤)。它只針對 htmlelement 物件,不適用於其他節點。

outerhtml: outerhtml屬性可以獲取該 dom 元素及其後代節點所形成的序列化的 html 片段。把自身也顯示出來了。

innertext: 表示其節點和子節點所包含的文字。在  中有詳細的描述:

nodevalue: 獲取或設定當前節點的值。對於文件節點來說,nodevalue返回null. 對於 text, comment, 和 cdata 節點來說,nodevalue 返回該節點的文字內容. 對於 attribute 節點來說, 返回該屬性的屬性值.

講解DOM節點的獲取

獲取第 個 節點 firstchild 有可能會匹配到是空 或換 的節點資訊 firstelementchild 不會匹配空 或換 的節點資訊 獲取到的 是元素節點,不會獲取到 本節點 獲取最後 個 節點 lastchild 有可能會匹配到是空 或換 的節點資訊 lastelementchild 不...

DOM獲取節點的兄弟,父節點,子節點

先說一下js的獲取方法,其要比jquery的方法麻煩很多,後面以jquery的方法作對比。js的方法會比jquery麻煩很多,主要則是因為ff瀏覽器,ff瀏覽器會把你的換行也當最dom元素 原生的js獲取id為test的元素下的子元素。可以用 var a docuemnt.getelementbyi...

JS的DOM 一 獲取節點

html文件被瀏覽器解析後就是乙個dom樹。獲取dom節點的方式 document.getelementbyid 通過id值獲取 document.getelementbytagname 通過標籤名獲取 document.getelementbyname 通過name屬性值獲取 不推薦 firstc...