javascript
Javascript学习总结 - JS基础系列 二
簡述
本系列將持續更新Javascript基礎部分的知識，誰都想掌握高端大氣的技術，但是我覺得沒有一個扎實的基礎，我認為一切高階技術對我來講都是過眼云煙，要成為一名及格的前端工程師，必須把基礎打扎實了。我也想展翅高飛，但前提我必須練就一雙會飛的翅膀。
JavaScript（DOM）部分
了解 Javascript & DOM
DOM全稱：文檔對象模型DOM（Document Object Model）是定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
HTML文檔可以說由節點構成的集合，DOM 節點有:
元素節點：html、body、p標簽等都是元素節點（標簽）。
文本節點:向用戶展示的內容，如<li>...</li>中的文本。
屬性節點:元素屬性，如<a href='http://edu.jobui.com'/>標簽所帶的超鏈接屬性。
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
整個文檔是一個文檔節點
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
注釋是注釋節點
雖然還是有點亂，但是我是這么理解DOM的：Javascript與Html文檔元素的進行業務邏輯交互。
湯姆大叔是這么解釋的：DOM（Document Object Model，文檔對象模型）是一個通過和JavaScript進行內容交互的API。
window對象作為全局對象，也就是說你可以通過window來訪問全局對象。
DOM為web文檔創建帶有層級的結果，這些層級是通過node節點組成，這里有幾種DOM node類型，最重要的是Element, Text, Document。
每個引擎對DOM標準的實現有一些輕微的不同。例如，Firefox瀏覽器使用的Gecko引擎有著很好的實現（盡管沒有完全遵守W3C規范），但IE瀏覽器使用的Trident引擎的實現卻不完整而且還有bug，給開發人言帶來了很多問題。
getElementsById()方法
通過節點的ID，可以準確獲得需要的元素，是比較簡單快捷的方法。語法：
說明：根據指定的 id 屬性值得到對象。返回 id 屬性值等于 sID 的第一個對象的引用。假如對應的為一組對象，則返回該組對象中的第一個。 如果無符合條件的對象，則返回 null 。
注意： document.getElementById()得到的是一個對象； 用alert顯示得到的是object，而不是具體的值； 它有`value`和`length`等屬性； 加上`.value`得到的才是具體的值。注意：在 IE 中 getElementById() 只抓得到第一個出現的ID的事務。
getElementsByName()方法
返回帶有指定名稱的節點對象的集合。語法：
與getElementById()方法不同的是，通過元素的name屬性查詢元素，而不是通過id屬性。
注：
因為文檔中的name屬性可能不唯一，所有getElementsByName()方法返回的是元素的數組，而不是一個元素。
和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。
getElementsByTagName()方法
返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。 語法:
說明:
Tagname是標簽的名稱，如p、a、img等標簽名。
和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。
區別 getElementByID() , getElementsByName() , getElementsByTagName()
以人來舉例來說：人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。
ID 是一個人的身份證號碼，是唯一的。所以通過getElementById()獲取的是指定的一個人。
Name 是他的名字，可以重復。所以通過getElementsByName()獲取名字相同的人集合。
TagName可看似某類，getElementsByTagName()獲取相同類的人集合。如獲取小孩這類人:getElementsByTagName("小孩")。
下面有一個html代碼片段：
<input type="checkbox" name="hobby" id="hobby1"> 音樂<input type="checkbox" name="hobby" id="hobby2"> 登山<input type="checkbox" name="hobby" id="hobby3"> 游泳<input type="checkbox" name="hobby" id="hobby4"> 閱讀<input type="checkbox" name="hobby" id="hobby5"> 打球<input type="checkbox" name="hobby" id="hobby6"> 跑步 <input type="button" value = "全選" id="button1"><input type="button" value = "全不選" id="button1">如果：
我們使用document.getElementsByTagName("input")，結果為獲取所有標簽為input的元素，共8個。
我們使用document.getElementsByName("hobby")，結果為獲取name屬性為hobby的元素，共6個。
我們使用document.getElementById("hobby6")，結果為獲取id屬性為hobby6的元素，只有一個。
getAttribute()方法
通過元素節點的屬性名稱獲取屬性的值。語法：
說明：
elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。
name：要想查詢的元素節點的屬性名字。
上圖：實現獲取h1標簽的屬性值。
運行結果：
h1標簽的ID ：alink
h1標簽的title ：getAttribute()獲取標簽的屬值
getAttribute()方法是一個函數。它只有一個參數——你打算查詢的屬性的名字。
不過，getAttribute()方法不能通過document對象調用，它只能通過一個元素節點對象調用。
setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。語法：
說明：
1.name: 要設置的屬性名。
2.value: 要設置的屬性值。
注意：
1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。
setAttribute()方法允許我們對屬性節點的值做出修改，這是一個很重要的特質。
通過setAttribute()方法對文檔做出的修改，將使得文檔在瀏覽器窗口里的顯示效果和/或行為動作發生相應的變化，但我們在通過瀏覽器的view source（查看源代碼）選項去查看文檔的源代碼時看到的仍將是原來的屬性值。
也就是說，setAttribute()方法做出的修改不會反映在文檔本身的源代碼里。
這種“表里不一”的現象源自DOM的工作模式：先加載文檔的靜態內容、再以動態方式對它們進行刷新，動態刷新不影響文檔的靜態內容。這正是DOM的真正威力和誘人之處：對頁面內容的刷新不需要最終用戶在他們的瀏覽器里執行頁面刷新操作就可以實現。
節點屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。
DOM 節點有三個重要的屬性 ：
nodeName : 節點的名稱
nodeValue ：節點的值
nodeType ：節點的類型
1、nodeName 屬性: 節點的名稱，是只讀的。
元素節點的 nodeName 與標簽名相同
屬性節點的 nodeName 是屬性的名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
2、nodeValue 屬性：節點的值
元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本自身
屬性節點的 nodeValue 是屬性的值
3、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型:
元素類型：節點類型
元素：1
屬性：2
文本：3
注釋：8
文檔：9
訪問子結點（childNodes）
訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。語法：
<script type="text/javascript" charset="utf-8">var nodeName = elementNode.childNodes;</script>結合案例說一下：
注意:
IE全系列、firefox、chrome、opera、safari兼容問題。
節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7。
所以它就被看成了：
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>運行結果:（IE和其它瀏覽器結果是一樣的）
UL子節點個數:3
節點類型:1
訪問父節點（parentNode）
這個跟上面那個子節點都比較少用到，簡單說一下就可以了，獲取指定節點的父節點
語法：
注意:父節點只能有一個。
獲取 P 節點的父節點的案例：
<div id="text"><p id="con"> parentNode 獲取指點節點的父節點</p></div> <script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.nodeName);</script>運行結果:
parentNode 獲取指點節點的父節點 DIV訪問祖節點:
<script type="text/javascript" charset="utf-8">var nodeName = elementNode.parentNode.parentNode;</script>看看下面的代碼:
<div id="text"> <p>parentNode <span id="con"> 獲取指點節點的父節點</span></p></div> <script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.parentNode.nodeName);</script>運行結果:
parentNode獲取指點節點的父節點 DIV注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。
注：其實還有兄弟節點nodeObject.nextSibling，這里就不多說了，確實很少用到。
瀏覽器窗口可視區域大小
講述獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法
1、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
2、對于 IE 8、7、6、5：
document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。
document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。
或者Document對象的body屬性對應HTML文檔的<body>標簽
document.body.clientHeight
document.body.clientWidth
3、在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth || document.body.clientWidth;var h= document.documentElement.clientHeight || document.body.clientHeight;網頁卷去的距離與偏移量
先看一張圖：
說明：
scrollLeft : 設置或獲取位于給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。
scrollTop : 設置或獲取位于對象最頂端與窗口中可見內容的最頂端之間的距離 ，即上邊灰色的內容。
offsetLeft : 獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置 。
offsetTop : 獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算頂端位置 。
注意:
區分大小寫
offsetParent：布局中設置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。
總結
最后附上一份福利吧：
代碼說明：這段代碼能實現選項卡切換的效果
1、HTML頁面布局
選項卡標題使用ul..li
選項卡內容使用div
2、CSS樣式制作
整個選項卡的樣式設置
選項卡標題的樣式設置
選項卡內容的樣式設置
一開始只顯示一個選項卡內容，其它選項卡內容隱藏。
3、JS實現選項卡切換
獲取選項卡標題和選項卡內容
選項卡內容多個，需要循環遍歷來操作，得知哪個選項卡和哪個選項內容匹配
通過改變DOM的css類名稱,當前點擊的選項卡顯示，其它隱藏。
總結
以上是生活随笔為你收集整理的Javascript学习总结 - JS基础系列 二的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到蛇吃自己预示着什么
- 下一篇： ReactJS学习 相关网站