摘要:簡單記錄請看阮一峰的意思是我使用的是文檔對象模型在文檔與對象做一個模型映射就是文檔對象模型把文檔變成對象的模型就是元素文本是標(biāo)簽的父元素只要看到一個節(jié)點(diǎn)瀏覽器就構(gòu)造出來一個對應(yīng)的對象放在內(nèi)存中頁面中的節(jié)點(diǎn)通過構(gòu)造函數(shù)變成對象想要操作節(jié)點(diǎn)就操
DOM API
簡單記錄
請看阮一峰的DOM API
意思是我使用的是html5
Document Object Model文檔對象模型
在文檔與對象做一個模型映射,就是文檔對象模型
把文檔變成對象的模型.就是DOM
Element元素, Text 文本.
Document是html標(biāo)簽的父元素.
只要看到一個節(jié)點(diǎn),瀏覽器就構(gòu)造出來一個對應(yīng)的對象,放在內(nèi)存中.
頁面中的節(jié)點(diǎn)通過構(gòu)造函數(shù)變成對象,想要操作節(jié)點(diǎn),就操縱對象相應(yīng)的API就行了
document繼承node,原型鏈
底下幾個接口去MDN看詳細(xì)的,或者需要用了就去看MDN
1.Node接口 1.1屬性Node派生于Object
sibling,兄弟姐妹
屬性
childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent
注意:
nextSibling,previousSibling會獲取到文本節(jié)點(diǎn).使用nextElementSibling,previousElementSibling
innerText,textContent有細(xì)微區(qū)別
nodeType,1表示元素,3表示文本
nodeName
1.2方法cloneNode()
方法(如果一個屬性是函數(shù),那么這個屬性就也叫做方法;換言之,方法是函數(shù)屬性)
appendChild()//加兒子
cloneNode()
注意:
深拷貝:遞歸拷貝里面所有的內(nèi)容
div.cloneNode(true);深拷貝,不寫或者false就是淺拷貝
contains()
hasChildNodes()
insertBefore()
isEqualNode()//只要長得一樣就行,內(nèi)存地址不一樣沒關(guān)系 isSameNode()//等價(jià)于===,完全相等,包括地址,同一個 removeChild()//移除孩子,但是還在內(nèi)存中 replaceChild()//交換孩子
normalize() // 常規(guī)化
是
將兩個文本節(jié)點(diǎn)變成一個
搞清楚英文單詞的意思就知道用法
如果發(fā)現(xiàn)知道英文后依然不明白用法,看 MDN 的例子即可,如 normalize
document繼承node,原型鏈
2.1屬性body characterSet//字符編碼 childElementCount//子標(biāo)簽數(shù)量 children doctype documentElement domain//獲取域名 head hidden images links//獲取所有的a標(biāo)簽 location//獲取當(dāng)前地址 onxxxxxxxxx//監(jiān)聽事件 origin plugins//時(shí)候開始起flash插件 readyState//是否下載完了 **referrer**//引薦,通過引薦拒絕為其他網(wǎng)站提供服務(wù).引薦就是從那個網(wǎng)站打開的這個請求.可以用來只能在自己的網(wǎng)站請求,其他地方直接打開這個請求是打不開的,具體看視頻,防止把這個網(wǎng)站當(dāng)圖床 scripts scrollingElement//正在滾動的元素 styleSheets title visibilityState//查看當(dāng)前頁面是都正在被用戶瀏覽,如果用戶打開了這個頁面,但是不在看當(dāng)前頁面,這個就是false2.2方法:
close()//關(guān)閉文檔,不用 createDocumentFragment() createElement() **注意**:div1.innerText="hello"會把div里面所有的元素去除掉,只剩下hello文本.所以要用div.appendchild(document.createTextNode("hello")),這樣才不會覆蓋 createTextNode() execCommand()//執(zhí)行命令,當(dāng)希望插入使用富文本編輯器的時(shí)候使用這個 exitFullscreen()//退出全屏 getElementById() getElementsByClassName() getElementsByName() getElementsByTagName() getSelection() hasFocus() open() **querySelector()**//通過選擇器選擇元素.得到的都是偽數(shù)組 querySelectorAll() registerElement() write() writeln()3.Element 的接口
看MDN classList innerHtml可以讀取html格式.標(biāo)簽會顯示.出于安全問題盡量不要用. innerText只是文本
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/95270.html
摘要:通過解析器獲取文檔對象后,開發(fā)人員可以很方便的對其進(jìn)行操作,如獲取更元素,獲取一個子元素,增加子元素,移除子元素。它并沒有為解析提供任何新功能,但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器,默認(rèn)使用隨包一起發(fā)行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初發(fā)表于我的個人博客非典型性程序猿 眾所周知,SAX與DOM是JAVA中兩大核心X...
摘要:通過解析器獲取文檔對象后,開發(fā)人員可以很方便的對其進(jìn)行操作,如獲取更元素,獲取一個子元素,增加子元素,移除子元素。它并沒有為解析提供任何新功能,但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器,默認(rèn)使用隨包一起發(fā)行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初發(fā)表于我的個人博客非典型性程序猿...
摘要:事件觸發(fā)和監(jiān)聽事件相關(guān)。文檔是一個由標(biāo)簽嵌套而成的樹形結(jié)構(gòu),因此,也是使用樹形的對象模型來描述一個文檔。節(jié)點(diǎn)的寫法三是樹繼承關(guān)系的根節(jié)點(diǎn)。七表示一個上的范圍,這個范圍是以文字為最小單位的。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個專欄,每天10分鐘,重構(gòu)你的前端知識體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的...
摘要:事件觸發(fā)和監(jiān)聽事件相關(guān)。文檔是一個由標(biāo)簽嵌套而成的樹形結(jié)構(gòu),因此,也是使用樹形的對象模型來描述一個文檔。節(jié)點(diǎn)的寫法三是樹繼承關(guān)系的根節(jié)點(diǎn)。七表示一個上的范圍,這個范圍是以文字為最小單位的。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個專欄,每天10分鐘,重構(gòu)你的前端知識體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的...
摘要:事件觸發(fā)和監(jiān)聽事件相關(guān)。文檔是一個由標(biāo)簽嵌套而成的樹形結(jié)構(gòu),因此,也是使用樹形的對象模型來描述一個文檔。節(jié)點(diǎn)的寫法三是樹繼承關(guān)系的根節(jié)點(diǎn)。七表示一個上的范圍,這個范圍是以文字為最小單位的。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個專欄,每天10分鐘,重構(gòu)你的前端知識體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的...
閱讀 2473·2021-11-23 09:51
閱讀 533·2019-08-30 13:59
閱讀 1833·2019-08-29 11:20
閱讀 2541·2019-08-26 13:41
閱讀 3249·2019-08-26 12:16
閱讀 740·2019-08-26 10:59
閱讀 3335·2019-08-26 10:14
閱讀 607·2019-08-23 17:21