操作DOM元素（4）

• appendChild用法

  • 1.新创建一个li元素

    	var newLi = document.createElement("li");
    	newLi.innerText = "我是新建的li";
    	ul1.appendChild(newLi);
    

  • 2.如果要添加的元素原本就存在 移动到父元素的最后

    	var li2 = document.getElementById("li2");
    	ul1.appendChild(li2);
    

  • 3.如果要添加的元素有子元素 该元素及其子元素都移动到元素的最后面

    	var ul2 = document.getElementById("ul2");
    	ul1.appendChild(ul2);
    

• insertBefore插入子元素

  • 语法：父元素.inserBefore(参数1，参数2)
    • 参数1：需要新插入元素
    • 参数2：插入到那个元素的前面
    • 1.创建的元素

      var newLi = document.createElement("li");
      newLi.innerText = "我是新建的li";
      ul1.insertBefore(newLi,li3);//直接将新元素插入到指定的位置
      

    • 2.原本就存在的元素

      var li2 = document.getElementById("li2");
      ul1.insertBefore(li2,li3);
      

    • 3.需要插入的元素有子元素

      var ul2 = document.getElementById("ul2");
      ul1.insertBefore(ul2,li3);
      

• replaceChidl替换子元素

  • 语法：父元素.replaceChild(参数1，参数2)
    • 参数1：要替换的新元素
    • 参数2：要替换的新元素
    • 1.创建的元素

      var newLi = document.createElement("li");
      newLi.innerText = "我是新建的li";
      ul1.replaceChild(newLi,li3);//直接将新元素插入到指定的位置
      

    • 2.原本就存在的元素

      var li2 = document.getElementById("li2");
      ul1.replaceChild(li2,li3);
      

    • 3.需要插入的元素有子元素

      var ul2 = document.getElementById("ul2");
      ul1.replaceChild(ul2,li3);
      

• removeChidl移出子元素

  • 语法：父元素.removeChild(子元素)
    • 1.元素不能调用该方法移除自己(不能自杀)

      li3.removeChild(li3);//报错
      

    • 2.父元素不能移除其他元素的子元素(不能杀死别人的儿子)

      ul1.removeChild(li2);//报错
      

    • 3.父元素只能移自己的子元素

      ul1.removeChild(li3);
      

• DOM对象

  • js的三大组成部分
    • ECMAScript js的规范
    • DOM 是一套操作页面的API
    • BOM 是一套操作浏览器页面的API
  • window对象 : 浏览器窗口
    var a = 12; console.log(a); console.log(window.a); //12 console.log(window); console.log(window.a == a); //true alert(123); //window.alert(123); console.log(document.body); console.log(window.document.body); //2 console.log(age); //报错 因为age没有定义 console.log(name); //3 window.name = 10; console.log(window.name); name = [12,34,25]; console.log(window.name); console.log(top); //4 var top = "123"; console.log(top);
    • 特点：
      • 1.对于全局变量或者全局方法，在取值或者调用的时候，可以省略window
      • 2.window对象是js中的顶级对象(所有的全局变量 全局函数 包括document 都是window对象的属性)
      • 3.window对象有一个默认的属性name，而且name的值只能是字符串
      • 4.top属性是只读性质，无法修改

• window里的两个方法

  • 打开窗口 ： open
  • 关闭窗口 ： close

    var newWindow;
    	document.getElementById("open").onclick = function(){
    		//打开窗口
    		/*
    		@param url 网址
    		@param name 相当于a标签的target属性
    					两个值:_self 自己 在本页面打开
    						  _blank 在新的标签页打开(默认值)
    		@param featrues	特征 设置新窗口的大小位置等特征
    		@param replace 
    				true - URL 替换浏览历史中的当前条目
    				false - URL 在浏览历史中创建新的条目
    		*/
    		
    		newWindow = window.open("http://www.baidu.com","_blank","left=200px,top=200px,height=500px,width=500px","true");
    	}
    	
    	document.getElementById("close").onclick = function(){
    		window.close(newWindow);
    	}
    

• window里的3个事件

  • window的三个事件 ： 从浏览器打开到关闭的三个时刻
    • 1.页面所有内容加载完毕才会执行(包括页面的DOM元素 外部资源 图片资源)

    		window.onload = function(){
    		console.log("页面加载完毕");
    		//作用 : 可以在页面的任意位置获取到dom元素
    		var box = document.getElementById("box");
    		console.log(box);
    	}
    

    • 2.在页面即将关闭的前一时刻

    		window.onbeforeunload = function(){
    		console.log("页面即将关闭");
    		
    		return "您确定要离开吗?";
    
    		//病毒 ： 关闭网页时 人为的写一个死循环 无限打开新的窗口(!!!!!!!!!!不要轻易尝试)
    		while(true){
    			window.open();
    		}
    	}
    

    • 3.也面正在关闭

    		window.onunload = function(){
    		console.log("页面正在关闭");
    	}
    

• setInterval定时器

  • 定时器(计时器) : 每隔一段时间 执行一段代码

    var start = document.getElementById("start");
    	var stend = document.getElementById("end");
    	var timeID;
    	start.onclick = function(){
    		if(timeID){
    			alert("正在运行");
    		}else{
    			timeID = setInterval(function(){
    				console.log(123);
    			},1000)
    		}
    	}
    

    • 特点 ： 1.一旦开启 就会永久执行，只能手动停止
    • setInterval(参数1，参数2)
      • 参数1 ：回调函数 就是执行的代码
      • 参数2 ： 时间间隔 (单位是ms)
      • setInterval 有一个返回值 就是timeID(定时器ID)
    • 清除定时器 clearInterval(定时器ID)

      stend.onclick = function(){
      	clearInterval(timeID);
      }
      

      • 定时器的ID : 在页面内可以开启多个定时器 那么浏览器为了区分这些定时器，每当开启一个定时器的时候浏览器就会给这个定时器一个唯一的编号，那么这个编号就是定时器的ID

• setTimeout定时器(一次性定时器)

  • 开启一次性定时器

    var timeID = setTimeout(function(){
    		console.log(123);
    	},3000);
    	console.log(666);
    

  • 清除定时器 clearTimeout() //很少用

    clearTimeout(timeID);