HTML学习13 js- window.onload 兼容写法 访问关系 dom的节点操作

window.onload出现的原因

		我们都知道页面的代码顺序是从上往下进行加载，很多时候我们要对页面中的某一个模块进行操作，这时候我们常常使用javascript代码来进行操作。
		为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端。
		但是我们在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能出现代码中操作的对象未被加载的情况，那么我们该如何去解决呢？
		这时候window.onload就被有了存在的意义了。

	window.onload是什么？ 
		window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。
		即：window.onload =function (){这里写操作的代码};
	window.onload的用法： 
		因为页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。 
		所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。 
	window.onload的特点：
		Jquery的ready()与Javascrpit的load()
			window.onload()												
			$(document).ready()

加载时机 必须等待网页全部加载完毕（包括图片等），然后再执行JS代码 只需要等待网页中的DOM结构加载完毕，就能执行JS代码
执行次数 只能执行一次，如果第二次，那么第一次的执行会被覆盖 可以执行多次，第N次都不会被上一次覆盖
举例 以下代码无法正确执行： 以下代码正确执行：

			window.onload = function()  { alert(“text1”);};             $(document).ready(function(){alert(“Hello”)}); 
			window.onload = function()  { alert(“text2”);};             $(document).ready(function(){alert(“Hello”)}); 

结果只输出第二个 结果两次都输出
简写方案 无 $(function () {})

主流浏览器支持 ie 6 7 8 不认识
怎么办？ 我们自己封装自己的 类 。

前端会有兼容问题，一般浏览器分为2种，ie（银行系统）、谷歌

获取页面上的全部指定的class的标签

原理： （核心）
我们要取出所有的盒子， 利用遍历的方法 ， 通过每一个盒子的className 来判断。 如果相等就留下。

<script>
    window.onload = function(){
       //封装获取页面上的全部指定的class  
        function getClass(classname){//兼容写法
            //如果浏览器支持，则直接返回
            if(document.getElementsByClassName)//ie8以上才支持的
            {
                return document.getElementsByClassName(classname);
            }
            // 不支持的 浏览器
            var arr = []; // 用于存放满足的数组
            var dom = document.getElementsByTagName("*");
            //alert(dom.length);
            for(var i=0;i<dom.length;i++)
            {
                if(dom[i].className == classname)
                {
                    arr.push(dom[i]);
                }
            }
            return arr;
        }
        console.log(getClass("demo").length);
    }
</script>

访问关系

各个节点的相互关系

父节点	兄弟节点	子节点	所有节点
parentNode	nextSibling	firstChild	childNodes
	nextElementSibling	firstElementChild	children
	previousSibling	lastChild
	previousElementSibling	lastElementChild

父节点

父 ： parentNode 亲的一层

<script>
    window.onload = function(){
       //封装获取页面上的全部指定的class  
        function getClass(classname){
            //如果浏览器支持，则直接返回
            if(document.getElementsByClassName)//ie8以上才支持的
            {
                return document.getElementsByClassName(classname);
            }
            // 不支持的 浏览器
            var arr = []; // 用于存放满足的数组
            var dom = document.getElementsByTagName("*");
            //alert(dom.length);
            for(var i=0;i<dom.length;i++)
            {
                if(dom[i].className == classname)
                {
                    arr.push(dom[i]);
                }
            }
            return arr;
        }
        console.log(getClass("demo").length);
    }
</script>

兄弟节点

nextSibling 下一个兄弟 亲的 ie 678 认识
nextElementSibling 其他浏览器认识的

previousSibling 同理 上一个兄弟
previousElementSibling
我们想要兼容 我们可以合写 || 或者

var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = “red”;

必须先写 正常浏览器 后写 ie678

子节点

firstChild 第一个孩子 ie678
firstElementChild 第一个孩子 正常浏览器
var div = one.firstElementChild || one.firstChild;

lastChild
lastElementChild

孩子节点

childNodes 选出全部的孩子
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （嫡出）
火狐 谷歌等高本版会把换行也看做是子节点

利用 nodeType == 1 时才是元素节点 来获取元素节点
标签 元素

children 重要 选取所有的孩子 （只有元素节点）
这个更好 跟喜欢它 。 （庶出）
ie 678 包含 注释节点 这个要避免开。

dom的节点操作

新建节点 插入节点 删除节点 克隆节点 等等

创建节点

var div = document.creatElement(“li”);

上面的意思就是 生成一个新的 li 标签

插入节点

1.  appendChild();    添加孩子     append 添加的意思
    意思：  添加孩子   放到盒子的 最后面。
2.  insertBefore(插入的节点，参照节点)   子节点  添加孩子

写满两个参数  

demo.insertBefore(test,childrens[0]);
放到了第一个孩子的前面
如果第二个参数 为 null 则 默认这新生成的盒子放到最后面。
demo.insertBefore(test,null);

移除节点

removeChild() 孩子节点
var da = document.getElementById(“xiongda”);
demo.removeChild(da);

克隆节点

cloneNode();
复制节点
括号里面可以跟参数 ， 如果 里面是 true 深层复制， 除了复制本盒子，还复制子节点
如果为 false 浅层复制 只复制 本节点 不复制 子节点。