- window.history.go(-1)
- window.history.forward()
- window.history.back()
- JS彈出的窗口可以用JS關(guān)閉敞贡，而沒有提示
- window.status="123"
- window.location.reload()
- setTimeout一般是用匿名函數(shù)
- window.location === document.location[他們引用的是同一個對象]
console.dir(location);//遍歷location對象的所有屬性
"http://image.baidu.com/channel?c=寵物#寵物"
hash 1.#最后的內(nèi)容 eg:"#寵物"
host 2.主機名 eg:"image.baidu.com"
hostName 3.主機名 eg:"image.baidu.com"
port 4.端口 eg:""
pathName 5.除去host之外的名字 eg:"/channel"
protocol "http:"
search eg:"?c=寵物"
href eg:"http://image.baidu.com/channel?c=寵物#寵物"
常用：
window.location.href="your url"; //有歷史記錄
window.location.reload(true);//強制刷新
window.location.reload();//緩存刷新
window.location.replace("you url"); //沒有歷史記錄
- Navigator
frame
- contentWindow 返回內(nèi)嵌的網(wǎng)頁窗口對象
- window.parent返回父窗口
瀏覽器檢測
主要以下2種：
- userAgent字符串檢測
- 對象檢測
DOM
- label for屬性 document.getElementsByTagName("label")[0].htmlFor
- 文檔根節(jié)點
document.documentElement //就是html標簽
table
table.caption //獲取caption節(jié)點[唯一]
table.tHead //獲取head節(jié)點[唯一]
table.tFoot //獲取foot節(jié)點[唯一]
table.tBodies //獲取全部的body
//行和單元格的操作
table.rows //返回所有的行
table.rows[rowIndex].cells //返回所有的行
oneRow.rowIndex //獲取下標
oneRow.sectionRowIndex //當前tbody中的下標泵琳，不是全局的
oneCell.cellIndex //獲取單元下標
//表頭的操作
table.createCaption(); //沒有的創(chuàng)建新表頭，有的返回已有的表頭
table.createTHead();
table.createTFoot();
table.deleteCaption();
table.deleteTHead();
table.deleteTFoot();
table.insertRow(rowIndex);
row.insertCell(cellIndex);
table.deleteRow(rowIndex);
row.deleteCell(cellIndex);
document屬性
| 屬性 | 描述 |
|---|---|
| cookie | 設(shè)置或返回與當前文檔有關(guān)的所有 cookie |
| domain | 返回當前文檔的域名 |
| lastModified | 返回文檔被最后修改的日期和時間 |
| referrer | 返回載入當前文檔的文檔的 URL |
| title | 返回當前文檔的標題 |
| URL | 返回當前文檔的 URL |
nodelist
- nodelist.item() 返回 NodeList 中位于指定下標的節(jié)點誊役。
- nodelist.length 返回 NodeList 中的節(jié)點數(shù)获列。
元素節(jié)點屬性
- element.id 設(shè)置或返回元素的 id。
- element.attributes 返回元素屬性的 NamedNodeMap蛔垢，包含一個NamedNodeMap击孩，與NodeList類似[太麻煩，主要是遍歷屬性的時候使用]
element.attributes[attName].nodeValue
element.attributes[attName].nodeValue = '自定義數(shù)值'
- element.className 設(shè)置或返回元素的 class 屬性
- element.classList.add(className);
- element.classList.remove(className);
- element.setAttribute() 把指定屬性設(shè)置或更改為指定值鹏漆。
- element.getAttribute(attName) 返回元素節(jié)點的指定屬性值
- element.removeAttribute() 從元素中移除指定屬性巩梢。
- element.setAttributeNode(attName, attVal) 設(shè)置或更改指定屬性節(jié)點。
- element.getAttributeNode(attName) 返回指定的屬性節(jié)點
- element.removeAttributeNode() 移除指定的屬性節(jié)點艺玲，并返回被移除的節(jié)點括蝠。
- element.nodeName 返回元素的名稱。
- element.tagName 返回元素的標簽名饭聚。
- element.nodeType 返回元素的節(jié)點類型忌警。
- element.nodeValue 設(shè)置或返回元素值。
- element.title 設(shè)置或返回元素的 title 屬性秒梳。
節(jié)點類型
| 節(jié)點類型 | 數(shù)值常量 | 字符常量 |
|---|---|---|
| Element(元素節(jié)點) | 1 | ELEMENT_NODE |
| Attr(屬性節(jié)點) | 2 | ATTRIBUTE_NODE |
| Text(文本節(jié)點) | 3 | TEXT_NODE |
| Comment(注釋節(jié)點) | 8 | COMMENT_NODE |
屬性判定
- attr.isId 如果屬性是 id 類型慨蓝，則返回 true，否則返回 false端幼。
- attr.name 返回屬性的名稱礼烈。
- attr.value 設(shè)置或返回屬性的值。
- nodemap.item() 返回 NamedNodeMap 中位于指定下標的節(jié)點婆跑。
- nodemap.length 返回 NamedNodeMap 中的節(jié)點數(shù)此熬。
- nodemap.removeNamedItem() 移除指定的屬性節(jié)點。
- nodemap.setNamedItem() 設(shè)置指定的屬性節(jié)點（通過名稱）滑进。
屬性-CSS類
- element.style 設(shè)置或返回元素的 style 屬性犀忱。
屬性-HTML代碼/文本/值
- element.innerHTML 設(shè)置或返回元素的內(nèi)容。
- element.innerText[IE下會解析標簽]
- element.textContent[FF下忽略標簽，但是按照代碼的編寫樣式進行顯示]
- element.outerHTML 獲取元素內(nèi)容(包含元素自身)
- element.outerText
創(chuàng)建元素節(jié)點
- document.crateAttribute(name)： 用指定名稱name創(chuàng)建特性節(jié)點
- document.createComment(text)： 創(chuàng)建帶文本text的注釋節(jié)點
- document.createDocumentFragment()： 創(chuàng)建文檔碎片節(jié)點[防止頁面多次刷新]
- document.createElement(tagname)： 創(chuàng)建標簽名為tagname的節(jié)點
- document.createTextNode(text)： 創(chuàng)建包含文本text的文本節(jié)點
選擇器-基本
- element.getElementById() 返回對擁有指定 id 的第一個對象的引用。
- element.getElementsByClassName() 返回對擁有指定class數(shù)組必指。
- element.getElementsByTagName() 返回擁有指定標簽名的所有子元素的集合[HTMLCollection與NodeList非常相似]哺眯。
- document.getElementsByTagNameNS(namespace, name) // document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'div')
htmlCollection.nameItem(nameVal);可以獲得指定元素的對象
htmlCollection[nameVal] 同上邊等價 - element.getElementsByName() 返回帶有指定名稱的對象集合[HTMLCollection與NodeList非常相似]登淘。
- document.forms == document.getElementsByTagName('form') 返回帶有指定名稱的對象集合[HTMLCollection與NodeList非常相似]
document.forms[0] 取得第一個表單元素的內(nèi)容
document.froms[formName]
document.froms[formName].elements[表單中所有元素的集合][推薦的使用方法]
document.froms[formName].elements[0]
document.froms[formName].elements[elementName] 名字相同的控件radio會返回一個NodeList
- document.images
- document.links
- element.querySelector();
- element.querySelectorAll();
文檔處理-內(nèi)部插入
//向元素添加新的子節(jié)點蜕径，作為最后一個子節(jié)點[返回新增的子節(jié)點(如果該節(jié)點在文檔中已經(jīng)存在于毙，就把改節(jié)點移動到現(xiàn)在的位置)]趾盐。
element.appendChild(newNode)
文檔處理-外部插入
//在指定的已有的子節(jié)點之前插入新節(jié)點哥倔。
element.insertBefore(newNode, refNode)
文檔處理-替換
//替換元素中的子節(jié)點秸架。
element.replaceChild(newChild, oldChild)
文檔處理-刪除
//從元素中移除子節(jié)點[返回被刪除的節(jié)點oldNode]。
element.removeChild(oldNode)
文檔處理-復(fù)制
//克隆元素[是否進行深復(fù)制(這個節(jié)點就是個孤兒節(jié)點)]咆蒿。
element.cloneNode(booleanFlag)
insertAdjacentHTML方法
- el.insertAdjacentHTML(where, htmlString);
- el.insertAdjacentHTML('beforeBegin', htmlString); // 在該元素前插入
- el.insertAdjacentHTML('afterBegin', htmlString); // 在該元素第一個子元素前插入
- el.insertAdjacentHTML('beforeEnd', htmlString); // 在該元素最后一個子元素后面插入
- el.insertAdjacentHTML('afterEnd', htmlString); // 在該元素后插入
篩選-過濾
//如果元素擁有指定屬性东抹，則返回true，否則返回 false沃测。
element.hasAttribute()
//如果元素擁有屬性缭黔，則返回 true，否則返回 false蒂破。
element.hasAttributes()
//如果元素擁有子節(jié)點馏谨，則返回 true，否則 false寞蚌。
element.hasChildNodes()
篩選-查找
- element.childNodes 返回元素子節(jié)點的 NodeList[類數(shù)組對象]田巴。
- element.parentNode 返回元素的父節(jié)點钠糊。
- element.firstChild 返回元素的首個子挟秤。
- element.lastChild 返回元素的最后一個子元素。
- element.previousSibling 返回位于相同節(jié)點樹層級的前一個元素[同胞節(jié)點]抄伍。
- element.nextSibling 返回位于相同節(jié)點樹層級的下一個節(jié)點[同胞節(jié)點]艘刚。
- element.ownerDocument 文檔根節(jié)點[比較直接，省去層層的麻煩]
- document.doctype 獲得對<!DOCTYPE>的引用
- document.head
- document.title
- document.body
