目錄
選擇器節點之間關係
節點的屬性
節點操作
自定義屬性
document.getelementbyid("id屬性的值");
根據id屬性的值獲取元素,返回來的是乙個元素物件
document.getelementsbytagname("標籤名字");
根據標籤名字獲取元素,返回來的是乙個偽陣列,裡面儲存了多個的dom物件
document.getelementsbyname("name屬性的值")
根據name屬性的值獲取元素,返回來的是乙個偽陣列,裡面儲存了多個的dom物件
document.getelementsbyclassname("類樣式的名字")
根據類樣式的名字來獲取元素,返回來的是乙個偽陣列,裡面儲存了多個的dom物件
document.queryselector("選擇器的名字");
根據選擇器獲取元素,返回來的是乙個元素物件
document.queryselectorall("選擇器的名字")
根據選擇器獲取元素,返回來的是乙個偽陣列,裡面儲存了多個的dom物件
1.parentnode屬性
返回當前節點的父節點元素
2.childnodes屬性
返回當前節點的所有子元素陣列
3.chiledren屬性
返回當前節點的所有子元素陣列(元素節點)
4.nextsibling
獲取當前節點的下乙個兄弟節點
5.nextelementsibling
獲取當前節點的下乙個元素兄弟節點
6.previoussibling
獲取當前節點的上乙個兄弟節點
7.previouselementsibling
獲取當前節點的上乙個兄弟元素節點
(可以使用標籤--元素.出來,可以使用屬性節點.出來,文字節點.點出來)
* nodetype:節點的型別:
1 代表 標籤, 2---屬性, 3---文字
* nodename:節點的名字:
標籤節點---大寫的標籤名字,屬性節點---小寫的屬性名字,文字節點----#text
* nodevalue:節點的值:
標籤節點---null,屬性節點---屬性值,文字節點---文字內容
window.onload = function ()var box = document.getelementsbyclassname("box")[0];
var newtag = box.clonenode(true);
// console.log(newtag);
張三var box = document.getelementbyid('box');
設定自定義屬性
box.setattribute('class', 'test')
box.setattribute('***', 'male')
獲取自定義屬性的值
box.getattribute('age')
box.getattribute('***')
移除屬性
box.removeattribute('age')
box.removeattribute('id')
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...
屬性選擇器
一 屬性選擇器 id user 匹配屬性開頭 user id list 匹配屬性結尾 list id id 萬用字元 選擇屬性中任意位置包含指定字元的元素 id id 以id開頭或等於id值的元素 二 位置選擇器 li even 匹配集合中的偶數元素 li odd 匹配集合中的奇數元素 li fir...
屬性選擇器
屬性選擇器 屬性選擇器 功能描述 e attr 選擇匹配具有屬性attr的e元素 e attr val 選擇匹配具有屬性attr的e元素,並且屬性值為val 其中val區分大小寫 e attr val 選擇匹配元素e，且e元素定義了屬性attr，其屬性值是以val開頭的任意字串 e attr val...