BOM and DOM

BOM

Broswer Object Model 浏览器对象模型

windows对象常用的属性和方法

三个弹出框

特点：阻塞代码执行

• alert( “内容” ) 弹出框
• confirm(“提示信息”) 确认框（确定返回true，取消返回false）
• prompt(“提示信息”,“默认值”) 输入框（返回数值为字符串）

定时器

• setInterval(执行任务，时间间隔)：连续执行定时
• clearInterval() //定时器的返回值，可以理解为是关闭定时器的钥匙
• setTimeout(执行任务，时间间隔) 只执行一次 延时性
• clearTimeout() 停止定时器

location:地址对象

• location.href 页面跳转 ，可读写
• location.replace(“url”) 覆盖原先网页，没有浏览痕迹
• location.reload() 页面刷新

document 文档对象 作用 找对象

• 每个载入浏览器的HTML文档都会成为Document对象
• Document 对象使我们可以从脚本中对HTML页面中的所有元素进行访问
• Docunent 对象是Window对象的一部分，可通过window.document 属性对其进行访问

  //document
  //a. document.write()
  //1.自带字符串解析
  document.write("lalala"+ "<br/>"+"xixixi" );
  document.write("<font color="green">"+666+"</font>")
  //2.如果该方法与事件连用，会直接覆盖原网页
  var oBtn = document.getElementById("btn");
  oBtn.onclick = function(){
      document.write("hahaha");
  }

getElementById()返回拥有指定id的第一个对象的引用。
getElementByTagName()返回带有指定标签名的对象集合
getElementByClassNane()
getElementByName()返回带有指定名称的对象集合。

DOM

• DOM (Document Object Model),文档对象模型
• 根据层次关系访问节点（包括文本和元素）

parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild  返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点

• 通过层级关系访问元素节点

firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点

• 节点类型：
  通过nodeType属性来判断节点类型

• 1 代表元素节点
• 3代表文本节点

  <p id = "_p">123</p>
  var p = document.getElementById("_p") //1
   // 元素类型       1
   document.write(p.nodeType)
   //文本类型        3
   document.write(p.firstChild.nodeType) //3

• 节点的操作

document.createElement(HTML 标签名)   //创建一个元素节点
node.appendChild(newChild)       //newChild被添加到孩子列表中的末端。
node.insertBefore(newChild,referenceNode)  //将newChild节点插入到referenceNode 之前。
node.remove()  //删除node子节点
node.replaceChild(newChild,oldChild)  //用newChild节点替换oldChild节点

• 创建节点

    //增
   //1.创建节点
   //createElement("标签名")；
   var oH = document.createElement("h2");
   oH.innerHTML = "静夜思";
   //2.追加
   //父节点.appendChild("子节点");
   document.body.appendChild(oH);
   
   var oP = document.createElement("p");
   oP.innerHTML = "床前明月光";
   
   document.body.appendChild(oP);
   //流程 : 先创建，后追加

• 删除节点

	//删除的方法  元素.remove(无参);
	
	var oBtn = document.querySelector("button");
	var oUl = document.querySelector("ul");
	//var arrLis = oUl.childNodes;
	var arrLis = oUl.children;//返回父元素的子元素，以数组形式返回
	
	oBtn.onclick = function(){
		arrLis[2].remove();
        //hasChildNodes判断当前的父元素是否还有子节点
        if(oUl.hasChildNodes()){
            oUl.lastElementChild.remove();

        }
	}
	

• 表格的动态创建

var t =document.createElement("table");
   t.border = "1px";
   for(var i=0;i<3;i++){
       var tr = document.creatElement("tr");
       for (var j=0;j<3;j++){
           var td = document.createElement("td");
           td.innerHTML = parseInt(Math.random()*100)*9+1;
           tr.appendChild(td);
       }
       t.appendChild(tr);
       // 添加一行
       var b = document.createElement("td");
       b.innerHTML = "删除";
       tr.appendChild(b);
       b.onclick = function(){
           // this代表当前点击对象
           this.parentNode.remove();//remove方法无参，谁调用它删除谁
       }

   }
   document.body.appendChild(t);