JS基础语法之DOM01(找标签、改属性样式）

DOM：暂时可以理解为找标签、改样式

1.BOM:

　  记住location这个就可以：

　　　　location.href　　获得当前页面的URL

　　　　location.href = "URL" 　　跳转到指定的页面

　　　　location.reload　　重新加载页面

2.JS操作DOM：

　　1.找标签：

　　　　1.基本查找：

　　　　　　1.document.getElementById("ID值")

　　　　　　2.document.getElementByClassName("class值")

　　　　　　3.document.getElementsByTagName("标签名")

　　　　2.间接查找：

　　　　　　1.找父标签：

　　　　　　　　1.document.parentElement

　　　　　　2.找子标签：找到的可能是多个

　　　　　　　　1.document.children

　　　　　　3.第一个子标签：

　　　　　　　　1.document.firstElementChild 

　　　　　　4.最后一个子标签：

　　　　　　　　1.document.lastElementChild

　　　　　　5.上一个兄弟标签：

　　　　　　　　1.document.previousElementSibling 

　　　　　　6.下一个兄弟标签：

　　　　　　　　1.document.nextElementSibling 

　　2.创建标签（非常重要）

　　　　1.document.createElement("标签名")

　　3.添加标签：

　　　　1.在内部的最后添加

　　　　　　　document.appendChild("标签名")　　　　

　　　　2.在内部的某个标签的前面插入

　　　　　　　document.insertBefore(要插入的标签，哪个标签之前)

　　　　　　　

                             

 

　　4.替换标签：

　　　　　　1.在父标签里面用新创建的标签替换指定的标签

　　　　　　　　1.父标签.replaceChild(新创建的标签,指定的标签)

　　                      

　　5.属性（内置属性）

　　　　.属性名 = "属性值"

　　　　　　var img = document.createElement("img")

　　　　　　img.src = "URL"　　　　

　　　　.自定义的属性只能用：

　　　　　　.setAttribute("s9","hao")

　　　　　　.getAttribute("s9")

　　　　　　.removeAttribute("s9")

　　6.文本操作

　　　　1.设置文本的内容

　　　　　　1.设置文本的内容：

　　　　　　　　.innerText = "　　"

　　　　　　2.设置标签内容

　　　　　　　　.innerHTML = "<p>我是p标签</p>"

　　　　　　3.innerText和innerHTML的区别：

　　　　　　　　1：innerHTML       子标签和子标签的内容都取出来

　　　　　　　　2：innerText 　　  只取标签之间的文本内容

　　　　　　

 　　　　　　

             7.获取标签的值(input/select/textarea)

　　　　　　input标签.value()

　　　　　　select标签.value()　　

　　　　　　textarea标签.value()            

　　　   　   

 　　　　  　

 　　　　　　

 　　　　　　

 　　　　8.操作标签的样式

　　　　　　1.通过class名去改变所有样式类

　　　　　　　　1.　.className         得到的是字符串

　　　　　　　　2.　.classList　　　  得到的是数组

 　　　　　　　　

 　　　　　　2.使用classList操作样式

　　　　　　　　1.　.classList.contains("样式类")　　判断包不包含指定的样式

　　　　　　　　2.　.classList.add("样式类")　　　　添加指定的样式类

　　　　　　　　3.　.classList.remove("样式类")　　  删除指定的样式类

　　　　　　　　4.　.classList.toggle("样式类")　　　有就删除没有就添加

　　　　　　　 　

　　　　　　　　　

 

 

 

 找标签案例：

　　1.直接查找：

　　　　以标签的属性id、标签的属性样式名、标签的名字

<div id="d1">div</div>
<p class="c1">p标签</p>
<p class="c2">第二个标签</p>

 

　　2.间接查找：

　　　　获取某一个标签，找它的子标签、兄弟标签、父标签等

<div id="d1">div</div>
<p class="c1">p标签</p>
<p class="c1">p标签2</p>
<p class="c2">第二个标签</p>

<div id="d2">
    <div id="d3">d2里面的d3</div>
    <div id="d4">d2里面的d4</div>
</div>

<div id="d1">div</div>
<p class="c1">p标签</p>
<p class="c1">p标签2</p>
<p class="c2">第二个标签</p>

<div id="d2">
    <div id="d3">d2里面的d3</div>
    <div id="d4">d2里面的d4</div>
    <div id="d5">d2里面的d5</div>
</div>

 

　　3.创建标签：

　　　　唯一用的比较多的创建原生DOM语句，document.createElement("img");

　　　　当前页面代码里多了一个img标签，但是后台代码是没有这个标签的，页面重新加载时，img标签不存在；

 　此时页面上显示了一张图片

 

 

 

 3.找到标签之后怎么改变样式：

 

 注：对于含有中横线的CSS属性，将中横线后面的第一个字母改成大写即可。

　　 css：background-color,这里是backgroundColor