JavaScript的DOM

1、DOM概述

              通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。

              当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

                 HTML DOM 模型被构造为对象的树

2、获取Html元素

                1、通过id来查找： 

document.getElementById("name");   //查找id="name"的元素

                2、通过class来查找：

var arr = document.getElementsByClassName("name")  //class="name"的元素  
        //因为class选择器可以重复所以返回的是一个数组  使用时可以for循环遍历

               3、通过标签名查找：

var y=x.getElementsByTagName("p");  //查找所有p标签

3、修改Html内容

               当我们通过id，class，标签名获得到我们想要的元素之后，我们可以通过innerHTML或者innerText属性修改。

document.getElementById("id").innerHTML="<h1>你好</h1>abcd";    //这里面可以添加一些标签和元素
document.getElementById("id").innerText="xxxx";      //这里面添加元素和标签无效

4、改变HTML属性

               

 <!--  属性    值   属性  值-->
<input type="text" name="user" id="p1" value="" />
<script type="text/javascript">
		var a=document.getElementById("p1").getAttribute("type");   //结果 text
		var b=document.getElementById("p1").setAttribute("type","password"); //将text改 
                                                                             //成了password
		document.write(a);
		document.write(b);
</script>

5、修改CSS样式

 

//修改id="id1"的元素背景颜色为红色
document.getElementById("id1").style.backgroundColor="red"
//修改id="id2"的元素字体大小为15px
document.getElementById("id2").style.fontSize=15px;

6、元素操作

         1、创建新元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script type="text/javascript">
//创建新的<p> 元素：
var para=document.createElement("p");
//添加文本，创建了一个文本节点：
var node=document.createTextNode("这是一个新段落。");
//向 <p> 元素追加这个文本节点：
para.appendChild(node);
//必须向一个已有的元素追加这个新元素。
var element=document.getElementById("div1");
element.appendChild(para);
</script>

           2、删除元素

//第一种 根据父节点删除子节点
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
//第二种 根据id直接删
document.getElementById("p1").remove();

7、DOM事件

<div id="div1" style="height: 150px;width: 150px;background-color: deepskyblue;"></div>
<input type="button" name="myButton" id="myButton1" value="变色" onclick="myClick1()"/>
<input type="button" name="myButton" id="myButton2" value="点击" onclick="myClick2()"/>
<h1 onclick="this.innerHTML='改变内容!'">点击文本!</h1>  //给标签添加onClick事件
		<script type="text/javascript">
            //给按钮添加事件
			function myClick1(){
				document.getElementById("div1").style.backgroundColor="green";
			}
			function myClick2(){
				alert("点我干嘛！");
				alert("你再点我试试！");
			}
            
		</script>

 

8、EventListener(监听事件)

function myClick2(){
		alert("点我干嘛！");
			}
function myClick2(){
		alert("你再点我试试！");//只会弹出这一个对话框
			}           
			

        使用addEventListener("事件"，方法名，boolean) 方法 不会覆盖之前添加的事件。

                           第一个参数是事件的类型 (如 "click" 或 "mousedown"). 把on去掉

                           第二个参数是事件触发后调用的函数。

                           第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。默认值为 false, 即冒泡传递，

                              当值为 true 时, 事件使用捕获传递。

document.getElementById("myButton2").addEventListener("click",myclick1);
document.getElementById("myButton2").addEventListener("click",myclick2);
document.getElementById("myButton2").addEventListener("click",myclick3);
			function myclick1(){
				alert("点我干嘛！");
			}
			function myclick2(){
				alert("再点一个试试！");
			}
			function myclick3(){
				alert("你还点我！");
			}

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

//阻止冒泡   event.stopPropagation();

在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。