1·dom：文件物件模型 document object model
瀏覽器通過渲染html檔案生成乙個層次分明的dom樹
js通過這種層級關係對任意乙個dom節點進行操作
操作方法分類：
1）·core dom 這套方法具有通用性，可以作用於xml，html等任意具有結構性的文件
2)·xml dom 專門用來操作xml文件
3)·html dom：專門用來操作html文件
2·getelementsby...
getelementbyid 通過id選擇器:返回結果只有乙個
如果存在多個同名id，按順序返回第乙個 若沒有同名id存在返回空物件null
getelementsbyname 通過name選擇器：返回結果是陣列型別
返回陣列包含所有name屬性匹配的元素
getelemnetbytagname 通過標籤選擇器：與name相同
getelementbyclassname 通過類選擇器：與name相同
增強for迴圈 ： for （item in arr）{}
3·獲取和修改元素屬性
設操作物件為：
1)查詢你要操作的元素
var img = document.getelementbyid("img");
2)獲取元素對應的值
img.getattribute("src");
3)改變元素屬性值
img.setattribute("src","位址")；
4·點符號法（可彌補setatrribute缺點）
text.style.屬性 = "屬性值";
多個屬性的定義時候 需要點符號法的優化
1）csstext
text.style.csstext +=";屬性1：屬性值;屬性2：屬性值..."; --- 可以實現多個樣式的追加
2）classname
text.classname += "空格+類名稱（直接在css中寫乙個類）"; ---- 可以實現多個類同時存在
實現多個樣式類或者樣式id的新增
1）樣式id 的新增
var text = documentgetelementbyid（"id"）;
var id = text.getatrribute("id");
text.setatrribute("id",id + " id名稱")
乙個元素不能同時存在（如「id=id1 id2 」）多個id，否則乙個id也不會生效
即若text已經通過id選擇器新增了樣式 則新增了的新id樣式和之前的id樣式都會失效
2)樣式類的新增
var text = document.getelementbyclassname("calss");
var class = text.getatrribute("calss");
text.setatrribute("calss",class + "類名稱");
獲取DOM物件
瀏覽器根據html標籤生成的 js物件 把網頁內容當做物件來處理 語法 document.queryselector css選擇器 引數 包含乙個或多個有效的css選擇器 字串 返回值 css選擇器匹配的第乙個元素,乙個 htmlelement物件。如果沒有匹配到，則返回null。123 abc段落...
原生js獲取DOM物件的幾種方法
通過id獲取 id box div let box document.getelementbyid box script 注意 getelementbyid 括號中的不需要在前面加 因為方法就決定了括號中的值是乙個元素的id值。該方法返回乙個dom物件。2.通過class獲取 class box d...
JS獲取DOM節點
父節點id為target，有兩個字節點，獲取target下所有字節點 const childrens document.getelementbyid target getelementtagname div 得出的childrens是乙個陣列，陣列中的元素是target下的子節點。childnode...