整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
avascript中children和childNodes的區別
1 childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文本節點。
可以通過nodeType來判斷是哪種類型的節點，只有當nodeType==1時才是元素節點，2是屬性節點，3是文本節點。
有些人錯誤的使用()去取該集合元素，下表列出各瀏覽器對childNodes(i)的支持情況：
IE6/7/8/Safari/Chrome/Opera IE9/Firefox
childNodes(i) 支持 不支持
有時候需要獲取指定元素的第一個HTML子節點(非屬性/文本節點)，最容易想到的就是firstChild 屬性。
代碼中第一個HTML節點前如果有換行，空格，那么firstChild返回的就不是你想要的了。可以使用nodeType來判斷下。
function getFirst(elem){
for(var i=0,e;e=elem.childNodes[i++];){
if(e.nodeType==1)
return e;
}
}2 children：非標準屬性，它返回指定元素的子元素集合。
但它只返回HTML節點,甚至不返回文本節點，雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持。
和childNodes 一樣，在Firefox下不支持()取集合元素。因此如果想獲取指定元素的第一個HTML節點，可以使用children[0]來替代上面的getFirst函數。
這里需要注意的是children在IE中包含注釋節點。
區別: childNodes會返回文本節點,children不會返回文本節點
以childNodes屬性為例:
IE6-IE8版本瀏覽器不會返回文本節點,IE9以上版本瀏覽器會返回文本節點
W3C瀏覽器(包括火狐瀏覽器)會返回節點
實例1:
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//IE6-8
//alert(oUl.childNodes.length);
for(var i=0;i<oUl.childNodes.length;i++)
{
//nodeType==3 -> 文本節點
//nodeType==1 -> 元素節點
//alert(oUl.childNodes[i].nodeType);
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
aaaa
bbbb
fafafsdfasd 文本節點
<span>qwerqwre 元素節點</span>
</body>
</html>實例2:
子1：（文本內容中的連續空格）
<p>這段文本中，輸入連續的空格 大概輸入了十個。</p>顯示效果：“格”和“大” 之間的是個空格顯示出來只是一個空格。
這段文本中，輸入連續的空格 大概輸入了十個。例子2：（代碼之間的連續空格）
<span>span是一個行內標簽</span> <span>和前面的span元素之間隔了很多個空格</span>顯示效果:兩個span元素之間連續的空格，顯示出來即"簽"與“和”之間的空格，只有一個空格。
span是一個行內標簽 和前面的span元素之間隔了很多個空格上面兩個例子證明：HTML代碼中連續的空格在顯示時會顯示為一個空格，其余的多余的空格會被移除或者說被忽略。
段落文本其實也是HTML代碼的一部分，只不過它在p標簽內部，而例子2的空格是在兩個span標簽之間。
理解了空格，現在看看空行，同理
例子3：（文本內容中的空行）
<p>這段文本中，輸入連續的空行
大概輸入了五行。</p>顯示效果：如我們所見，文本代碼中的五行空行，顯示出來也只是一個空格。
這段文本中，輸入連續的空行 大概輸入了五行。例子4：（元素之間/標簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會顯示為一個空格。
<span>span是一個行內標簽</span>
<span>和前面的span元素之間隔了很多空行</span>span是一個行內標簽 和前面的span元素之間隔了很多空行得證：HTML 代碼中的所有連續的空格或空行（換行）都會被顯示為一個空格。
既然如此，如果我們希望擴大兩個字符之間的間距，讓代碼中的連續空格或空行顯示出來的結果也是連續的空格或空行，那該怎么辦？其實很簡單。
方法一：我們可以用預格式化標簽<pre>，無論是空格或空行都適用。
<pre>
這是
預格式文本。
它保留了 空格
和換行。
</pre>顯示效果
這是
預格式文本。
它保留了 空格
和換行。方法二：我們可以用空格實體符 代替空格，用換行標簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對搜索引擎不是最友好的方式，因為 和<br/>在HTML中都是沒有語義的。所以建議盡量少用。另外需要注意的是， 必須小寫，而且最后面的分號是不能省略的。
方法三：（適合空格）使用全角空格
全角空格被解釋為漢字，所以不會被被解釋為HTML分隔符，可以按照實際的空格數顯示。
問題：怎么使用全角輸入法？
以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態欄中有個月亮的標志，就說明正在使用的是半角輸入，如果是太陽的標志，就說明使用的是全角輸入。全角/半角的切換可以通過點擊標志，也可以通過快捷鍵 Shift+Space（空格符）切換。
半角輸入（月亮）
全角輸入（太陽）
方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標準間隔。我們知道英文中兩個單詞之間是通過空格隔開的，所以我們視覺上可以這樣認為，word-spacing改變了（拉長或縮短）單詞之間那個空格的寬度。
方法五：使用CSS樣式中的white-space 屬性，這個屬性聲明如何處理元素內的空白符。
值 | 描述 |
normal | 默認。空白會被瀏覽器忽略。 |
pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。 |
nowrap | 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 |
pre-wrap | 保留空白符序列，但是正常地進行換行。 |
pre-line | 合并空白符序列，但是保留換行符。 |
white-space:normal;就是正常，和不設置一樣，連續空格和空行都只會顯示一個空格。
white-space:nowrap;不換行是什么意思呢？正常情況下，當我們的文本超出了文本域，文本就會自動折行，這個設置就是說不自動折行了，而是碰到換行標簽<br />才換
white-space:pre;和方法一相同，將文本原樣輸出顯示。當文本超出文本域時，不換行，會產生滾動條。
white-space:pre-wrap;保留空格和空行，但當文本超出文本域時，會自動換行。
white-space:pre-line;連續的空格會顯示為一個空格，但保留連續的空行。
u202f 和 \xa0 是 Unicode 字符，分別表示特定類型的空格字符。
text="1\u202f000\u202f000"
print(text)text="Hello\xa0World"
print(text)這兩個字符都在排版中有特殊的用途，通過統一替換為普通空格，可以使文本更適合進一步的處理和分析。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
