JS day09—BOM DOM

1.BOM

Broswer Object Mode（浏览器对象模型）

    结论:所有的属性和方法在被调用时，必须有前缀

            凡是省略前缀的属性和方法，它的父级对象都是window

             全局变量和方法的父级元素都是window

2.window的三个弹出框：

window对象常用的属性和方法：

三个弹出框: 特点阻塞代码执行

alert("内容")   弹出框

confirm("提示信息")  确认框   确定返回true 取消返回false

prompt("提示信息","默认值")    输入框 返回数值为字符串 

3.window的一个事件：

onload：延迟加载，必须在页面其他模块加载完毕后在执行事件体的代码

window.onload = function(){

        console.log("页面加载完成");

    }

    console.log("页面正在加载");

解决问题：

script可以写在html的任意位置，当body中写入代码，当在tml下面写script则没有任何问题

    但当写在head中时则会出现报错：因为代码是自上而下的运行的。则需要加入.onload来解决。

4.location：地址对象

属性的读写：

  1.href地址的读写：

读：

location.href

写：

location.href ="地址";

当前页面地址 读
	     document.write(location.href);
页面在三秒后跳到外网
    setTimeout(function(){
       location.href = "http://www.baidu.com";
        },3000);

  2.replace(替换的网站）：

读：

location.replace

写：

location.replace("地址");

location.replace("url")//加地址则会跳转到该地址所在页面
	 //location.replace("index.html");
	location.replace("http://www.baidu.com");   覆盖原先网页 没有浏览痕迹

3.reload:刷新

5.history：对象用户访问过的url

 1.back（）  加载history列表的前一个url

  2.forward（）   加载history列表的后一个url

  3.go（）  history列表的某一个具体页面

6.document：文档对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问

 1.write：

作用1：

字符串解析：能转换成html元素的则转换，转换不了的就原样返回

document.write("<br>");//换行
	    document.write("laolv");//输出laolv
	    document.write("<font color='#FF69B4'>" + "heihei" + "</font>");//输出粉色的heihei

作用2：

当write与事件连用时, 会直接覆盖原页面

	 var oBtn = document.getElementById("test");//获取body里id为test的元素
		
		 	oBtn.onclick = function(){
		 		document.write("xixi");
			}

7.获取HTML元素的方法：

  1.getElementById("id名")

      返回id所对应的单个元素

  2.getElementsByTagName("标签名")

     批量返回标签所对应元素，存放在数组中

  3.getElementsByClassName("类名")

  批量返回类名对应的元素，存放在数组中

  4.getElementsByName("name名")

  批量返回name名所对应的元素，存放在数组中

  5.querySelector("选择器")

   通过选择器来获取单个元素（标签，类，id）

  6.querySelectorAll("选择器")

   通过选择器来批量获取元素，存放在数组中（标签，类）

1.DOM：文档对象模型

Document Object Model

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法(接口)。

DOM是一个树形图，将文档中所有元素用树形图的方式连接起来

2.根据层级关系访问节点：（文本和元素）

  1.parentNode：

        返回节点的父节点

  2.childNodes：

         返回子节点的集合

  3.firstChild：

         返回节点的第一个子节点

  4.lastChild：

       返回节点的最后一个节点

  5.nextSibling：

       下一个节点

  6.previousSibling：

       上一个节点

  7.childNodes：

      批量获取父元素的子元素，存储在数组中

3.根据层级关系访问元素节点（元素节点）

 1.firstElementChild：

      返回节点的第一个子节点

  2.lastElementChild：

     返回节点的最后一个子节点

  3.nextElementSibling：

      下一个节点

  4.previousElementSibling：

       上一个节点

  5.children

     批量获取父元素的子元素，存放在数组中

4.node type：判断当前节点类型

  1：元素节点

  3：文本节点

	 var oP = document.querySelector("p");
		 	//console.log(oP.innerHTML);
		 	console.log(oP.nodeType);//1
		 	console.log(oP.firstChild.nodeType);//3

5.dom节点的增删：

   1.增：

           1.先建设

            document.creatElement("标签名")

           2.在追加

            父元素.appendChild(子节点）

  增：
		 1.先新建
		 document.createElement("标签名")
		      增加一个标签节点
		 2.再追加
		 父元素.appendChild(子节点)
		 var oH1=document.createElement("h1");
		 oH1.innerHTML ="静夜思";
		 document.body.appendChild(oH1);
		 var oP =document.createElement("p");
		 oP.innerHTML ="疑是地上霜";
		 document.body.appendChild(oP);

2.删除：

  节点.remove(无参);

   直接删除

var oBtn = document.querySelector("button");
			var oP = document.querySelector("p");
			var oUl = document.querySelector("ul");
			
			oBtn.onclick = function(){
				//oP.remove();
				oUl.lastElementChild.remove();
			}