DOM:文档对象模型:文档指的是网页:把网页变成一个Js可以操作的对象,给了JS可以操作页面元素的能力;
DOM:操作基础:获得操作的对象:
1.获得标签的 方法:(id选择法);
document.getElementById
document是DOM操作的关键字;get获得 element 元素 by 通过;
-------假如设置一个div id=“dic”--------
var dic=document.getElementById(“dic”);
dic.style.backgroundColor="red";
--------------无论之前是什么颜色都会被改成红色;----
2.通过TagName(标签名)获得标签;
var array=document.getElementsByTagName(“p”);
for(var a=0;a<array.length; a++){
array[a].style.backgroundColor=“blue”;
}
3.通过className获得你标签(类名)
----------设置一个div类名为oge
var array1=document.getElementsByClassName("oge");
array1[0].style.color="orange";
----------html5标准提供的新方法来获得标-------
1.查询单个标签
querySelector:query查询;selector方法;
(1)通过id来获得:
document.querySelector("#id").style.backgroudColor='orange”;
(2)通过className获得:
document.querySelector(".dic").style.backgroundColor="skyblue";
(3)通过tagName获得
document.querySelector("div'").style.backgroundColor="pink";
----------------------只选中一个标签-------
2.查询多个标签(数组):
(1)className
var array=document.querySelectorAll(“oge”);
for (var a=0;a<=array.length;a++){
array[a].style.backgroundColor=“yellow”;
}
(2)tagName
var array2=document.querySelectorAll(“div”);
for(var a=0; a<array2.length;a++){
array2[a].style.backgroundColor="skyblue";
}
-----------------------创建新的标签---------------------------
(1)创建一个新的标签
var p = document.createElement("p");
(2)找到这个div
var div = document.querySelector("div");
(3)给div增加子标签
div.appendChild(p);
------------------------删除标签元素------------ ---------------
1.找到要删除的标签
var div = document.querySelector("div");
2.找到父标签
var body = document.querySelector("body");
3.让body删除它上面的子元素div
body.removeChild(div);
------------------删除的子元素中的子元素都会跟着这个div删除----
多个相同标签在不同的父标签中:
------ 利用遍历数组,然后找到每一个a标签的父标签删除他们 -------
for(var n = 0;n<array.length;n++){
-------------parentNode是父标签元素,让a标签的父标签删除自己----------
array[n].parentNode.removeChild(array[n]);
}
-----------------------替换-------------------
(1)找到要被替换的标签
var button = document.querySelector("button");
(2)创建一个新的标签
var div = document.createElement("div");
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "orange";
(3)替换他们 replaceChild(替换的元素,被替换的元素)
button.parentNode.replaceChild(div,button);
----------------插入--------------------
insertBefore(将要插入的元素,原有元素);
新建一个标签,放到h4标签之前
(1)创建要增加的新标签
var newDiv = document.createElement("div");
newDiv.style.width = "200px";
newDiv.style.height = "200px";
newDiv.style.backgroundColor= "skyblue";
(2)要找到h4标签
var h4 = document.querySelector("h4");
(3)调用h4的父亲将newDIV插入到h4之前
h4.parentNode.insertBefore(newDiv,h4);