DOM:
Document Object Model (文檔對象模型)
使用 JavaScript 能夠去操作頁面文檔中的各元素的添加、修改、刪除、克隆颊郎、查找等,或操作CSS
(1)JavaScript 能夠改變頁面中的所有 HTML 元素
(2)JavaScript 能夠改變頁面中的所有 HTML 屬性
(3)JavaScript 能夠改變頁面中的所有 CSS 樣式
(4)JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)
Document對象:
window.document 或 document 來引用
查找元素節(jié)點(diǎn):
(1)document.getElementById() -- 根據(jù)元素的 id 屬性查找
如果能夠查找到霎苗,則返回查找到的DOM元素對象姆吭,如果不能查找到,則返回 null
(2)document.getElementsByTagName() -- 根據(jù)元素的標(biāo)簽名查找
返回 HTMLCollection 集合唁盏,如果根據(jù)標(biāo)簽?zāi)軌虿檎业皆啬诶辏瑒t將所有查找到的元素保存到集合中检眯,如果不能查找到,則集合長度為0
(3)document.getElementsByClassName() -- (ES5)根據(jù)類名查找元素
返回 HTMLCollection 集合昆淡,如果根據(jù)類名能夠查找到元素锰瘸,則將所有查找到的元素保存到集合中,如果不能查找到昂灵,則集合長度為0
(4)document.getElementsByName() -- 根據(jù)元素的 name 屬性值查找
添加
創(chuàng)建元素節(jié)點(diǎn):
var element = document.createElement(tagName)
設(shè)置屬性:
element.setAttribute(attrName, attrValue) 或 element. = attrValue
添加到父元素內(nèi)部
parentElement.appendChild(element);
如果 element 是頁面中已存在的DOM元素避凝,則該方法為移動(dòng)元素
添加到父元素內(nèi)部某子節(jié)點(diǎn)前
parentElement.insertBefore(newNode, oldNode);
如果 oldNode 不存在,則將 newNode 追加到末尾
元素內(nèi)部文本:
(1)element.innerHTML-- 內(nèi)部HTML文本
(2)element.innerText-- 內(nèi)部純文本
創(chuàng)建文本節(jié)點(diǎn):var txtNode = document.createTextNode(text)
可以將文本節(jié)點(diǎn)添加到元素內(nèi)部:element.appendChild(txtNode);
刪除
父元素內(nèi)部刪除孩子節(jié)點(diǎn)
parentElement.removeChild(childNode)
克隆
var copy = node.cloneNode(boolean)
注意點(diǎn):boolean 表示是否克隆元素后代眨补,默認(rèn)為 false(不克滤∏),如果需要克隆節(jié)點(diǎn)后代渤涌,則傳遞 true
查找(層級--屬性):
(1)node.parentNode -- 查找父節(jié)點(diǎn)
(2)node.childNodes -- 所有孩子節(jié)點(diǎn)
(3)node.children -- 所有孩子元素節(jié)點(diǎn)
(4)node.firstChild -- 第一個(gè)孩子
(5)node.lastChild -- 最后一個(gè)孩子
(6)node.previousSibling -- 前一個(gè)兄弟節(jié)點(diǎn)
(7)node.nextSibling -- 后一個(gè)兄弟節(jié)點(diǎn)
CSSOM
CSS-Object Model
獲取:
(1)行內(nèi)(內(nèi)聯(lián))樣式:
element.style
(2)所有樣式:
window.getComputedStyle(element) -- 經(jīng)過計(jì)算后的樣式
-- IE9之前瀏覽器只支持:element.currentStyle
設(shè)置:
element.style. = attrValue;