HTML與DOM BOM javascript

時間 2019-11-29

標籤 html dom bom javascript 欄目 HTML 简体版

原文原文鏈接

1.什麼是DOM？

簡單說就是DOM規定了HTML，XML等的一些文檔映射規範，使JavaScript能夠根據這些規範來進行獲取元素，在元素上進行各類操做，使得用戶頁面能夠動態的變化，從而大大使頁面的交互性加強。而這些文檔映射規範咱們能夠用樹來形象的表示:javascript

經過這樣的樹，咱們就能夠很快找到咱們想要操做的節點，進而進行各類屬性，方法，事件等的操做。
html

注意元素、屬性、和內容之間的區別，簡單的說，網頁上可見的東西叫作內容，內容是被開標籤，閉標籤抱起來的那部分：<a>個人連接</a>，屬性說明元素的特色java

2.經過javascript修改DOM

經過javascript修改DOM的例子：node

//1.獲取元素
//這裏是經過標籤獲取，同理，你能夠經過id獲取，經過class獲取，也能夠先獲取父元素，經過父元素的children屬性來對其子元素進行操做
var x = document.getElementByTagName('a');//經過TagName獲取的是標籤數組
//2.修改元素內容
//這裏使用的是innerText，還有innerHTML可使用
x[0].innerText="哈哈";//修改數組中第一個a元素的內容爲"哈哈"
//3.修改它的屬性
x[0].href="http://www.qq.com"
//4.修改它的樣式
x[0].style.color="blue";

注意：用javascript修改title元素內容的方式有一點特別：jquery

title在html中屬於特殊的節點元素.由於它可使用doucment.getElementsByTagName("title")[0]來獲取它的標題,但卻沒法用doucment.getElementsByTagName("title")[0]用更改它的值.數組

可是,總有解決的方法. 在javascript中,修改title的方法是：瀏覽器

document.title = 'xxxxxx';

在<body></body>之間的節點元素用document.getElementsByTagName()來獲取安全

document.documentElement表明的是<html></html>中間的全部東西.ruby

js會使用document.title來代替網頁的title的緣由是，title,head,body等標籤是缺省的惟一標籤，因此 document.title和document.body能夠直接找到結果．服務器

而title是一個結構的標籤，也就是說title內，只能加入nodetext．而不能再加別的元素．因而它的使用又具備特殊性．爲了避免讓代碼出錯．因而js中規定document.title這個對象只有一個屬性（也能夠說是沒有屬性）,document.title自己就是document對象的一個屬性．而不是它的一個子對象．於用document.title=""來更改title.

經過javascript修改DOM結構,增長元素節點，刪除元素節點：

//1.獲取元素

//這裏是經過標籤獲取，同理，你能夠經過id獲取，經過class獲取，也能夠先獲取父元素，經過父元素的children屬性來對其子元素進行操做

var x = document.getElementByTagName('a');//經過TagName獲取的是標籤數組

//2.建立要插入的元素

var haskell = document.createElement('p');

haskell.id = 'haskell';

haskell.innerText = 'Haskell';

//3.在獲取元素的內部加入新的元素

//兩種方法:1.插到父元素最後appendChild 2.插到指定元素以前insertBefore

x[0].appendChild(haskell);

//嘗試用insertBefore準確的插入

//建立新元素

var newTitle = document.createElement('h1');

newTitle.id = 'title1';

newTitle.innerText = '新標題';

//在父元素的指定子元素以前插入

x[0].insertBefore(newTitle,,haskell)

3.DOM事件觸發javascript

何爲事件冒泡？事件捕獲？

事件冒泡指的是：你單擊了一個元素，那麼該點擊事件會傳遞給它的父元素，再有父元素傳遞給父元素的父元素．

事件捕獲：默認你單擊了整個頁面，而後慢慢一級級降低，直到你點擊的那個元素．

1. HTML事件處理程序:

提示：有意思的編碼,如何讓HTML顯示一個'<'或者'<' ，html編碼.如何處理服務器不認識的編碼，URI編碼

缺點：

在HTML上綁定的方法，而具體實現的javascript還爲加載，此時操做會出錯！
事件處理函數的做用域歲不一樣瀏覽器而不一樣
HTML與javascript緊密耦合，若是要更換事件處理函數，必須改兩處，HTML與javascript都要改

因爲存在的種種缺點，隨後被人們摒棄，成爲歷史遺蹟，人們開始喜歡上用javascript指定事件處理程序,隨後帶來了DOM0與DOM2

2. DOM0級事件綁定：DOM0時代是Internet Explorer 4.0 與Netscape Navigator 4.0 （後來由於幹不過微軟索性開源，通過有心人開發，變成了FireFox瀏覽器）各自按各自的寫法的時代，混沌時代.以寫事件屬性名的方式，格式：on+事件名＝事件處理程序

var btn = document.getElementById("myBtn");
btn.onclick = function (){
// alert('Clicked');
alert(this.id);//this指向當前對象
}
//刪除事件處理程序
btn.onclick = null;

小插曲：this有什麼用

var student = {
name:"xiaoshan",
hello:null,
func:function (name) {　　　　//這是一個匿名函數,做爲對象的func屬性出現
this.name = name; //this默認指向當前對象的屬性，若是沒有那就混亂了,分不清是函數參數和對象參數了，小問題，何爲實際參數，何爲形式參數？
this.hello = function () {
alert('Hello, ' + this.name + '!');
}
}
}
//問題,請調用fuc函數來修改student的name和hello屬性，不用this的狀況下

3. DOM2級時代：按標準定義了事件和事件處理的接口,美好的統一寫法時代,並且能夠在一個元素上掛好多好多事件！DOM２瀏覽器不必定支持！

var btn = document.getElementById("myBtn");
btn.addEventListerner("click",function(){
alert(this.id);
},false);//false表示在事件冒泡的時候觸發
var handler = function (){
alert("hello world!");
}
btn.addEventListerner("click",handler,false);//再給該元素綁定第二個事件，會在第一個事件執行完後執行．
btn.removeEventListerner("click",handler,false);//清除該事件處理程序

IE的事件處理程序

var handler = function (){
alert("hello world!");
}
btn.attachEvent("onclick",handler);
btn.detachEvent("onclick",handler);

思考：既然寫法不同，如何跨平臺？

參考：javascript高級程序設計，第13章

慕課網：DOM事件探祕，http://www.imooc.com/learn/138

4.BOM是什麼鬼?

document.write("www.dreamdu.com");
window.document.write("www.dreamdu.com")

BOM是瀏覽器的一個標籤頁，用window對象來表示,能夠獲取當前頁的全部信息,你定義的全部全局變量,其實是屬於window對象的,意思是屬於該標籤頁

a = "hello world!";
alert(window.a);//會彈出hello world!

//獲取該標籤頁的頁面大小
// 能夠調整瀏覽器窗口大小試試:
alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);

window.location,因爲默認是在window命名空間下,window能夠略寫

window.location對象表示當前頁面的URL信息。例如，一個完整的URL：

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

能夠用location.href獲取。要得到URL各個部分的值，能夠這麼寫：

window.location.protocol; // 'http'
window.location.host; // 'www.example.com'
window.location.port; // '8080'
window.location.pathname; // '/path/index.html'
window.location.search; // '?a=1&b=2'
window.location.hash; // 'TOP'

document對象還有一個cookie屬性，能夠獲取當前頁面的Cookie。

Cookie是由服務器發送的key-value標示符。由於HTTP協議是無狀態的，可是服務器要區分究竟是哪一個用戶發過來的請求，就能夠用Cookie來區分。當一個用戶成功登陸後，服務器發送一個Cookie給瀏覽器，例如user=ABC123XYZ(加密的字符串)...，此後，瀏覽器訪問該網站時，會在請求頭附上這個Cookie，服務器根據Cookie便可區分出用戶。

Cookie還能夠存儲網站的一些設置，例如，頁面顯示的語言等等。

JavaScript能夠經過document.cookie讀取到當前頁面的Cookie：

document.cookie; // 'v=123; remember=true; prefer=zh'

因爲JavaScript能讀取到頁面的Cookie，而用戶的登陸信息一般也存在Cookie中，這就形成了巨大的安全隱患，這是由於在HTML頁面中引入第三方的JavaScript代碼是容許的：

<!-- 當前頁面在wwwexample.com --> <html>    <head>        <script src="http://www.foo.com/jquery.js"></script>    </head>    ... </html>

若是引入的第三方的JavaScript中存在惡意代碼，則www.foo.com網站將直接獲取到www.example.com網站的用戶登陸信息。

爲了解決這個問題，服務器在設置Cookie時可使用httpOnly,意思爲只在http通訊時可訪問，設定了httpOnly的Cookie將不能被JavaScript讀取。這個行爲由瀏覽器實現，主流瀏覽器均支持httpOnly選項，IE從IE6 SP1開始支持。

爲了確保安全，服務器端在設置Cookie時，應該始終堅持使用httpOnly。

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。