js : DOM+BOM（window.location）

DOM: document object model

• DOM 树

DOM中元素获取的方式

• id获取: var oDiv = document.getElementById("div1");
  • 注意，ID获取只能用document；
• class获取：document.getElementsByClassName();
  • 可以限定范围的获取元素
• tagName：可以限定范围的获取元素
• querySelect
  • tag
  • '#id
  • .class
• querySelectAll
  • tag
  • '#id
  • .class
  • 注意：querySelectAll获取到的是一组元素，即使是页面中唯一的ID，也得加[]获取；

节点

节点的关系

• children 子节点
  • 一般情况兼容，但是在IE6-8下，如果有注释的话，拿到的是不准确的；
• childNodes 拿到所有的子节点
• parentNode 父元素；拿到的是结构上的父级；
• previousSibling 上一个哥哥节点
• previousElementSiblings 上一个哥哥节点
  • 高级浏览器支持
• nextSibling 下一个弟弟节点
• getChildren 获取当前容器下，所有的子元素

• 实际能拿到所有的孙子辈的

<div class="wrap">
    <div>第一个div</div>
    <!--发生的发生的发生-->
    <div>第二个div</div>
    <a href="#">第1个a元素</a>
    <a href="#">第2个a元素</a>
    <!--是的发生的发展的发-->
    <a href="#">第3个a元素</a>
    是的方法阿魏酸
    <div>第三个div</div>
    <div>第四个div</div>
    是打发打发所发生的
    <span>第1个span</span>
    <!--水电费水电费v水电费水电费-->
    <span>第2个span</span>
    <span>第3个span</span>
</div>
<script>

//需求：获取限定范围内的所有子节点
/*
* 1. 目的：获取一定范围内的所有子节点
* 2. 参数：1）范围变量 2）获取的节点->可传可不传
* 3. 返回值：将最后获取到的子节点以数组的形式返回
*/

/*
* @功能 -> 获取限定范围内的所有子节点或特定的子节点
* @getChildren   -> function getChildren(){}
* @oParent       -> 父级元素，即范围
* @tagName       -> 所要获取的元素子节点 -> 可传可不传
*/
// 1. 确定范围,通过getElementsByClassName获取到的都是一个数组，只有一个的时候也需要用[0]来获取最终的元素
var oWarp = document.getElementsByClassName('wrap')[0];

function getChildren(oParent,tagName){
    var ary = [];
    var aChild = oParent.childNodes;
    for(var i=0;i<aChild.length;i++){
        if(aChild[i].nodeType === 1){
            tagName ? aChild[i].tagName.toLowerCase() == tagName.toLowerCase() && ary.push(aChild[i]): typeof tagName == "undefined"  && ary.push(aChild[i]);
        }
    }
    return ary;
}
//var aChildren = getChildren(oWarp);
</script>

• prev() 获取当前元素的上一个哥哥元素

<div class="wrap">
    <div>第一个div</div>
    <!--发生的发生的发生-->
    <div>第二个div</div>
    <a href="#">第1个a元素</a>
    <a href="#">第2个a元素</a>
    <!--是的发生的发展的发-->
    <a href="#">第3个a元素</a>
    是的方法阿魏酸
    <div>第三个div</div>
    <div>第四个div</div>
    是打发打发所发生的
    <span>第1个span</span>
    <!--水电费水电费v水电费水电费-->
    <span>第2个span</span>
    <span>第3个span</span>
</div>
<script>
    /*
     * 1. 目的：获取当前元素的上个一个哥哥元素
     * 2. 参数：1）当前元素
     * 3. 返回值：返回当前元素的上一个哥哥元素
     **/

    /*
     * @功能 ->获取当前元素的上个一个哥哥元素
     * @curEle  -> 当前元素
     *
     **/

    /*
     * 1. 获取当前元素
     * 2. 获取当前元素的上一个节点
     */

    var oDiv = document.getElementsByTagName("div")[0];
    var aDiv = oDiv.getElementsByTagName('div');

    function prev(curEle){
        if(curEle.previousElementSibling){
            return curEle.previousElementSibling;
        }
        var prev = curEle.previousSibling;
        while(prev && prev.nodeType !== 1){
            prev = prev.previousSibling;
        }
        return prev;
    }
</script>

next() 获取当前元素的下一个弟弟元素

<div class="wrap">
    <div>第1个div元素</div>
    <div>第2个div元素</div>
    <div>第3个div元素</div>
    <span>第1个span元素</span>
    <span>第2个span元素</span>
</div>
<script>
    var oWrap = document.getElementsByClassName('wrap')[0];
    var aIndex = oWrap.getElementsByTagName('div');

    function next(curEle){
        if(curEle.nextElementSibling){
            return curEle.nextElementSibling;
        }
        var next = curEle.nextSibling;
        while(next && next.nodeTyp !== 1){
            next = next.nextSibling;
        }
        return next;
    }

</script>

demo : 九九乘法表

<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul li{
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        cursor: pointer;
    }
    ul li.change{
        background: lightcyan;
    }
    ul li.bg0{
        background: lightblue;
    }
    ul li.bg1{
        background: lightskyblue;
    }
    ul li.bg2{
        background: lightsteelblue;
    }
    ul li span{
        display: inline-block;
        width: 90px;
        text-align: center;
    }
</style>


<ul></ul>




<script>
    (function(){
        var oUl = document.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var str = '';

        for(var i=1;i<10;i++){
            str += "<li>";
            for(var j=1;j<=i;j++){
                str += "<span>"+ j + "x" + i + "=" + j*i +"</span>";
            }
            str += "</li>";
        }
        oUl.innerHTML = str;

    // 思路一：自定义属性
       /* for(var i=0;i<aLi.length;i++){
            aLi[i].className =  'bg'+ i%3;
            aLi[i].bg = 'bg' + i%3;
            aLi[i].onmouseover = function(){
                this.className = 'change';
            }
            aLi[i].onmouseout = function(){
                this.className = this.bg;
            }
        }*/

       // 思路2: 变量
        for(var i=0;i<aLi.length;i++){
            aLi[i].className = "bg" + i%3;
            var oldBg = null;
            aLi[i].onmouseover = function(){
                oldBg = this.className;
                this.className = 'change';
            }
            aLi[i].onmouseout = function(){
                this.className = oldBg;
            }
        }

    })()

</script>

BOM的知识-window.location

• 网站的地址构成：
  • 协议+域名+端口号+pathname+'?k=v&k=v'参数+'#haha'哈希值
    protocol：http／https
    host:域名
    port：端口号
    pathname：文件路径
    search:?k=v&k=v
    hash:哈希值；
    href：完整的地址；
    reload：重新加载页面；
• 强制数据类型转换的
  1、 比较运算符 ==
  0=='' null==undefined []==0 ![]==false

  function fn(aa){
      if(aa==null){
          //jquery源码；
      }
  }
  

  2、算术运算符 - * ／ %
  3、逻辑运算符

  fn && fn();
  this.Arg||window;
  

  4、条件判断语句：
  • 除了false的都是true：false,0,NaN,'',null,undefined