dom 節點中對於獲取文字易混淆的屬性，innertext, innerhtml, outerhtml, textcontent, nodevalue。
乙個例項：
doctype html結果：ie9 及以上版本下的結果：>
<
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
>
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...