DOM & 事件

前言
 之前講都是js的純基本語法,表達式啥的辩稽,跟瀏覽器無關,可以使用node和控制臺執(zhí)行从媚;
 往后講的只有瀏覽器里才會有逞泄。
HTML的加載順序
  • 從上到下,從外到里依次加載
  • js的三種引入方式
    1. 內聯<script>
    2. 行內屬性上寫
    3. 外鏈.js文件
      總之
      <script>標簽內拜效,屬性值中喷众,.js文件里直接寫js代碼。
      你告訴js內存紧憾,要做某個事到千,
      DOM響應到有這個事情發(fā)生,把結果映射到瀏覽器讓我們看到
      及時響應
      如果改了顏色背景赴穗,都需要css渲染憔四,渲染過程可以忽略不計膀息。
      main.style.color = ["red","blue"][Math.random()2 | 0]
      Math.random()表示0到1之間的隨機小數,不包括0和1
      Math.random()
      2 | 0 表示0或者1
DOM API學習
DOM結構的操作
  1. 對象引用了赵,相當于拉了個線潜支,
    === 對象類型等完全一樣,如果不是基礎類型(字符串柿汛,數字)冗酿,那就是同一個東西,修改一個另一個也會修改络断。
  2. 集合不是數組已烤,但類數組。
    document.all[0] 是按照加載順序取的,從上到下妓羊,從外到里依次加載
    document.getElemntBy系列
    document.referrer 從哪里來的URL,返回""或者url字符串
    document.lastModified 最后修改時間

![Uploading 1-sibling_578152.jpg . . .]
document.domain 當前url的域名胯究,可以被修改,
但是只允許從二級修改到頂級域名(XXX.com, XX.cn, XXX.com.cn)

  • frame操作不能跨域躁绸,可以修改到頂級域裕循,名假裝同域名進行操作,

  • 但是如果當前頁,面有關聯太多,比如登錄請求净刮,都會發(fā)到頂級上剥哑,非常局限。

  • 并且css和js必須使用絕對路徑淹父,不然(相對路徑)都會訪問頂級上株婴。副作用很大。
    document.cookie暑认,返回一個字符串,例如 "M9xo_2132_lastvisit=1437095802;BAIDU_DUP_lcr=https://www.baidu.com/;pgv_pvi=1186400050; __utmc=14869410;username=wsc"
    cookie 是唯一可以服務端和客戶端同時操作的東西困介,
    比如一個請求發(fā)到服務端,服務端修改完告訴瀏覽器你也該改了蘸际。
    同時用腳本也可以修改座哩。
    https://github.com/shy2850/xhcms_2014/blob/master/js/module/cookie.js
    要精確的對 cookie 進行讀取其實很簡單,就是對字符串進行操作

    js全局對象

    1. escape(string)可對字符串進行編碼,這樣就可以在所有的計算機上讀取該字符串粮彤。
      返回: 已編碼的string 的副本根穷。
      其中某些字符被替換成了十六進制的轉義序列。
    2. stringObject.indexOf(searchvalue,fromindex)
      可返回某個指定的字符串值在字符串對象中首次出現的位置导坟。
      fromindex規(guī)定開始檢索的位置屿良。它的合法取值是0到 stringObject.length - 1
      如省略該參數惫周,則將從字符串的首字符開始檢索尘惧。
    3. toGMTString() 可根據格林威治時間 (GMT) 把 Date 對象轉換為字符串,并返回結果闯两。

HTML DOM Element 對象

注意
HTML 是對XML的擴展褥伴,但是不全,所以有時候要查XML DOM參考手冊文檔

  1. .nextElementSibling IE6不支持漾狼,但有.nextSibling跟前者等價重慢。例,需要用.nextSibling寫兼容【大坑】
  2. 如果前者是肯定意義直接返回前者逊躁,否則就返回后者似踱。如此邏輯可以使用下面的方式:return a || b //結果是精確的值,不是true稽煤、false,或運算的短路邏輯
    var a=1,b=2; a || b //1
    var a=0,b=2; a || b //2
    var a=null,b=2; a || b //2
  3. 在父的最前和最末位置分別插入
    parentNode.appendChild(newNode)
    parentNode.insertBefore(newNode,parentNode.childNodes[0])//不用children(不包含空白的text節(jié)點)
    after是有IE6兼容性問題的
    removeNode //移除節(jié)點
    cloneNode //復制節(jié)點
  4. 元素屬性和css的操作
    • case 表達式 原因核芽?
    • class操作
      css操作,提倡修改class來修改樣式
      做一個忽閃忽閃的東西酵熙,可以鍛煉思維
      通過以下方式修改所有的css樣式
      main.style .backgroundColor = "red";
      dom.style[name] = value;//name是變量時轧简,就不能再【點】了
      修改容易,獲取.css樣式表里的樣式難:
      getComputedStyle(main)[backgroundColor]
      所以盡量不取.css里的樣式進行對比匾二。

25ke 1:08

事件哮独,事件綁定的兼容見圖片
  • 事件綁定,比較復雜察藐,雜亂皮璧。先選中,再綁定事件
    1. 行內屬性賦值的方式
      選中再賦值分飞,只能賦值一次悴务,也就是只能添加一個事件

    2. 但是選中添加監(jiān)聽,可以綁定多個事件譬猫,不會修改或者覆蓋讯檐,只會附加更多事件
      mouseenter,是先離開再進入的時候染服,跟mouseleave相對
      而mouseout ,是在其子元素上也會觸發(fā)裂垦,。肌索。蕉拢。?
      dblclick 雙擊诚亚。
      mouseenter等這些IE6都不支持晕换,因為不支持addEventListen(),要用attachEvent

    3. 標準的this就是dom標簽,非標準的則不是,需要處理一下,把this替換過來
      在內部新創(chuàng)建個方法站宗,執(zhí)行的時候闸准,把方法執(zhí)行的主對像硬修改成dom,在dom上執(zhí)行
      listener.call(dom,event)//event 繼續(xù)傳遞下去
      等價于dom.listener()

    4. 事件很混亂的時候,去掉一個梢灭,在對比夷家,在修改蒸其。

    5. 新建的臨時的變量就是前端的緩存方法。

事件代理

  1. 為啥阻止冒泡库快?如何阻止
    點擊子不連帶著觸發(fā)父綁定的事件方法-阻止冒泡摸袁,而IE6下不用阻止冒泡
    停止事件傳播:e.stopPropagation()

  2. 為啥綁定到父上?
    考慮性能消耗义屏,如何一次綁定完全靠汁?還是要綁定上父上面
    target 是真正被點擊的子標簽 豆胸,非標準的則不是鳖枕,log一下target,略就,怎么全刪了兄墅?remove和removeChild的區(qū)別
    e.target || e.srcElement 分別代表(標準和IE瀏覽器)
    25ke 01:53

  3. 只是不從父main往上冒泡了,但是還會從子冒泡到他本身踢星?

  4. 事件怎么全解綁了?
    移除只能一個個移除隙咸,首先把事件函數緩存起來斩狱。
    用for循環(huán)移除所有事件。沒有統(tǒng)一的移除方法扎瓶。

事件綁定原則

能只綁一遍所踊,就不綁多遍,一次綁定概荷,事件很金貴的

css小節(jié)
  1. 絕對定位的層級會較普通的高秕岛,但是使用relative的更高∥笾ぃ可以用z-index調整
  2. 行內標簽有float的可以設置寬高继薛,總之脫離文檔流的,都可以設置寬高
  3. 盡量使用百分比愈捅。
  4. 想對誰定位遏考,要寫,不然就是相對應body,
  5. 而且IE必須主動指定left:0;top:0;
  6. overflow:hidden;或者line-height:0;
  7. 把元素的所有style屬性都改成默認的蓝谨,方法:inner.style.cssText = "";但是IE就不支持
  8. 樣式表里要杜絕寫id

25ke 02:16
星級評分自己動手寫灌具。
模擬下拉框
事件綁定和選取是最常用的功能,寫的多了就是在寫jquery這樣的框架
少使用鼠標譬巫,多用鍵盤

26ke 25min

   Q.create("div",{})?select.js
   對象.getAttribute("")//獲取所有屬性:id type class name
   或者對象.selected
   必須是表單元素咖楣,才能直接.value,.selceted;
   否則必須用.getAttribute("value")
   .tagName.toUpCase() === 'A'//因為會自己解析出來就轉成大寫芦昔,所以才诱贿。。
   ie6 不支持dispaly:block
   ie6 下 option 是大寫

總結

ctrl+d對網友收藏
云香水識的簡書
云香水識的runjs.cn
d3.js
webGL

表單操作
27-10min

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市珠十,隨后出現的幾起案子料扰,更是在濱河造成了極大的恐慌,老刑警劉巖焙蹭,帶你破解...
    沈念sama閱讀 212,294評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件晒杈,死亡現場離奇詭異,居然都是意外死亡壳嚎,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,493評論 3 385
  • 文/潘曉璐 我一進店門末早,熙熙樓的掌柜王于貴愁眉苦臉地迎上來烟馅,“玉大人,你說我怎么就攤上這事然磷≈3茫” “怎么了?”我有些...
    開封第一講書人閱讀 157,790評論 0 348
  • 文/不壞的土叔 我叫張陵姿搜,是天一觀的道長寡润。 經常有香客問我,道長舅柜,這世上最難降的妖魔是什么梭纹? 我笑而不...
    開封第一講書人閱讀 56,595評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮致份,結果婚禮上变抽,老公的妹妹穿的比我還像新娘。我一直安慰自己氮块,他們只是感情好绍载,可當我...
    茶點故事閱讀 65,718評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著滔蝉,像睡著了一般击儡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蝠引,一...
    開封第一講書人閱讀 49,906評論 1 290
  • 那天阳谍,我揣著相機與錄音,去河邊找鬼螃概。 笑死边坤,一個胖子當著我的面吹牛,可吹牛的內容都是我干的谅年。 我是一名探鬼主播茧痒,決...
    沈念sama閱讀 39,053評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼融蹂!你這毒婦竟也來了旺订?” 一聲冷哼從身側響起弄企,我...
    開封第一講書人閱讀 37,797評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎区拳,沒想到半個月后拘领,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,250評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡樱调,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,570評論 2 327
  • 正文 我和宋清朗相戀三年约素,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片笆凌。...
    茶點故事閱讀 38,711評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡圣猎,死狀恐怖,靈堂內的尸體忽然破棺而出乞而,到底是詐尸還是另有隱情送悔,我是刑警寧澤,帶...
    沈念sama閱讀 34,388評論 4 332
  • 正文 年R本政府宣布爪模,位于F島的核電站欠啤,受9級特大地震影響,放射性物質發(fā)生泄漏屋灌。R本人自食惡果不足惜洁段,卻給世界環(huán)境...
    茶點故事閱讀 40,018評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望共郭。 院中可真熱鬧眉撵,春花似錦、人聲如沸落塑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,796評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽憾赁。三九已至污朽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間龙考,已是汗流浹背蟆肆。 一陣腳步聲響...
    開封第一講書人閱讀 32,023評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留晦款,地道東北人炎功。 一個月前我還...
    沈念sama閱讀 46,461評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像缓溅,于是被迫代替她去往敵國和親蛇损。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,595評論 2 350

推薦閱讀更多精彩內容

  • 問答 一股囊、dom對象的innerText和innerHTML有什么區(qū)別? innerTextinnerText是一...
    婷樓沐熙閱讀 400評論 0 0
  • 問答 1.說說庫和框架的區(qū)別更啄? 類庫(Class Library):類庫就是一些類的集合稚疹,只要我們將一些可以復用的...
    鴻鵠飛天閱讀 264評論 0 1
  • 1.dom對象的innerText和innerHTML有什么區(qū)別内狗? innerText是一個可寫屬性。將寫入的內容...
    candy252324閱讀 534評論 0 0
  • 酒過三巡 聽著你們說過的名詞 沿著記憶 追溯每一段經歷的故事 耐人尋味 只可惜 我怎么努力 都回想不起 那些本不該...
    慕星讀者OR獨者閱讀 238評論 0 2
  • 熊市股票义锥, 1,防御性股票:白酒柳沙,醫(yī)藥,黃金缨该,貴金屬偎行。 川背?消費類贰拿,高速公路, ……………………………… 國際油價熄云,...
    王紅剛閱讀 153評論 0 0