dom的一些笔记

                              Dom复习

1.获取标签名，常用的有3种方式：

   <div id="box" onclick="fn()"></div>

  var div = document.getElementById("box");

  var arr1 = document.getElementsByTagName("div")

  var arr2 = document.getElementsByClassName("leiming");

2.onclick事件

  div.onclick = function () {
        //        alert(1);
        //可以操作标签的属性和样式。
         div.className = "aaa";
        div.style.width = "200px";
        div.style.height = "200px";
        div.style.backgroundColor = "red";
    }

    （2.用函数名绑定）

     不能写写括号，否则成为了返回值    

     div.onclick = fn;
     function fn() {
    //3.书写事件驱动程序。
     alert(1);
     }

 

3.windows.onload事件

 //什么条件下触动这个事件呢？页面加载（文本和图片）完毕的时候。
//用途
//js的加载时和html同步加载的。（如果使用元素在定义元素之间，容易报错。）
//整个页面上所有元素加载完毕在执行js内容
//window.onload可以预防使用标签在定义标签之前。

  案例：

  window.onload = function () {
    var aaa = document.getElementById("box");
    console.log(aaa);
    aaa.style.width = "100px";
}

 <div id="box"></div>

4.一个案例

   关闭京东的广告栏：dom1-05

5.document 文本流

 //节点的访问看看

 <div class="box1">
    <div class="box2" id="box2"></div>
    <div class="box3"></div>
</div>

 

//1.box1是box的父节点
var box2 = document.getElementsByClassName("box2")[0];
var box2 = document.getElementById("box2")
console.log(box2.parentNode);

//2.nextElementSibling下一个兄弟节点
console.log(box2.nextElementSibling);

//3firstElementChild第一个子节点
console.log(box2.parentNode.firstElementChild);

//4所有子节点
console.log(box2.parentNode.childNodes);
console.log(box2.parentNode.children);

//节点的增、删、查、改

 1.创建节点

 var aa=document.craeteElement

 var aaa = document.createElement("li");
2.添加 appendChild(标签节点);
var box1 = document.getElementsByClassName("box1")[0];
box1.appendChild(aaa);
box1.insertBefore(bbb,aaa);//把节点bbb放在aaa之前

3.删除 removeChild(标签节点);
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);//自杀，自己删除自己

4.克隆
 var ccc = box1.cloneNode();//默认为false
var ddd = box1.cloneNode(true);
console.log(ccc);
console.log(ddd);

 

 

6.节点属性的获取与赋值

//属性、赋值获取两种方式
//1.元素节点.属性或者元素节点[属性]

<img src="image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/>

 Var eleNode=document.getelementbyid(aaa);

eleNode.src = "image/jd2.png";
eleNode.aaa = "bbb";
console.log(eleNode.aaa);
console.log(eleNode.src);
console.log(eleNode.tagName);
console.log(eleNode["title"]);
console.log(eleNode["className"]);
console.log(eleNode["alt"]);

 

//2.元素节点.方法(); getAttributte set...  Remove...3个方法
console.log(eleNode.getAttribute("id"));
eleNode.setAttribute("id","你好");
eleNode.setAttribute("ccc","ddd");
eleNode.removeAttribute("id");

 

 

 

7.案例（经典案例好好看看）

  

8.value  innerHTML  innerText的区别

  <input id="inp1" type="text" value="我是inpput的value属性值"/>
<div id="box1">
    我是box1的内容
    <div id="box2">我是box2的内容</div>
</div>
<div id="box3">
    我是box1的内容
    <div id="box4">我是box2的内容</div>
</div>
<script>

    //value：标签的value属性。
    console.log(document.getElementById("inp1").value);

    //innerHTML：获取双闭合标签里面的内容。（识别标签）
    console.log(document.getElementById("box1").innerHTML);
    document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";

    //innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
    console.log(document.getElementById("box3").innerText);
    document.getElementById("box3").innerText = "<h1>我是innerText</h1>";
</script>

  

                         Dom2（记得查事件）

1,隐藏二维码：核心代码

  

 2.文本框禁用

    btn1.onclick=function(){
               //3.书写事件驱动程序
              input.disabled="no";//填写任何的值都表示true表示禁用
          }
         btn2.onclick=function() {
             input.disabled=false;
         }

3.onfocus获取了焦点  onblur失去焦点（焦点就是光标是否在）

  文本框获取焦点

  

4.重要的访问关系：

  //兄弟节点（前一个和后一个：previousSibling和nextSibling）
  //previousElementSibling和nextElementSibling在IE678中不支持。IE678不能获取文本节点。

  兼容性写法：

  1.前后兄弟节点

  var pre = box3.previousElementSibling || box3.previousSibling;
  var net = box3.nextElementSibling || box3.nextSibling;
  pre.style.backgroundColor = "red";
  net.style.backgroundColor = "yellow";

  2.第一个子节点，最后一个子节点

  var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;
  var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;

  3.所有子元素的获取方法：(2种方式)

   var arr = box3.parentNode.children;

    Var arr=box3.parentNode.childNodes;

  4.怎么指定一个节点呢？

var index = 0;
var node = box3.parentNode.children[index];

Html结构如下：

<ul>
    <li class="box1"></li>
    <li class="box2"></li>
    <li id="box3"></li>
    <li class="box4"></li>
    <li class="box5"></li>
</ul>

5.nodeType  nodeName   nodeValue

<div id="box" value="111">你好</div>

<script>

    var ele = document.getElementById("box");//元素节点
    var att = ele.getAttributeNode("id");//属性节点
    var txt = ele.firstChild;

      console.log(ele);

      console.log(att);
     console.log(txt);
    //属性1 nodeType
    console.log(ele.nodeType);//1      
    console.log(att.nodeType);//2
    console.log(txt.nodeType);//3

    //属性2 nodeName
    console.log(ele.nodeName);//DIV
    console.log(att.nodeName);//id 
    console.log(txt.nodeName);//#text

    //属性3 nodeValue
    console.log(ele.nodeValue);//null
    console.log(att.nodeValue);//box
    console.log(txt.nodeValue);//你好

 nodeType:1,document.get

         :2

连续赋值样式：

                                 DOM3

  1.获取元素的函数封装    

    //1.功能：给定元素查找他的第一个子节点，并返回
   function getFirstNode(ele){
    var node=ele.firstElementChild||ele.firstChild;
    return node;
      }
  //2.功能：给定元素查找他的最后一个子节点，并返回
function getLastNode(ele){
    var node=ele.lastElementChild||ele.lastChild;
    return node;
}
  //3.给定元素查找他的下一个元素兄弟的节点，并返回
function getNextNode(ele){
    return ele.nextElementSibling||ele.nextSibling;
}
  //4.给定元素查找他的上一个元素兄返弟的节点，并返回
function getPrevNode(ele){
    return ele.previousElementSibling||ele.previousSibling;
}
/**
 * 5.给定元素和索引值查找 指定索引值的兄弟元素节点，并返回
 * @param ele 元素节点
 * @param index 索引值
 * @returns {*|HTMLElement}
 */
function getEleOfIndex(ele,index){
    return ele.parentNode.children[index];
}

/**
 * 6.寻找一个节点所有的兄弟节点
 * @param ele
 * @returns {Array}
 */
function getAllSiblings(ele){
    //定义一个新的数组，装所有的兄弟元素。并且返回数组
    var newArr=[];
    var arr=ele.parentNode.children;
    for(var i=0;i<arr.length;i++)
    {
        if(arr[i]!=ele)//就是为了把自己排除在外
        {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

    

说明：注释方式，写完一个函数之后，在函数的上方 /** 然后按下enter键即可完成注释

2.如何获取节点的style呢？

  主要有两种方式：box.style.backgroundColor=”red”;

                box.style.cssText = " 200px; height: 200px; line-height:200px;"

3.案例1. 文本高亮显示

  

   案例2：高级隔行变色

  案例3：百变皮肤

4.定位和层级

  

5.dom元素的创建的3种方式：

  (1)document.write();

      For:document.write("<li>我是document.write创建的</li>");

  (2)第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）

      var ul = document.getElementsByTagName("ul")[0];

      ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"

  (3)document.createElement(”div”);

    var newLi = document.createElement("li");
    newLi.innerHTML = "我是createElement创建的";

6.节点的操作

  （之前已经说过了：就是几种常见节点的操作函数的使用）

   1.document.createElement();

   2. Ele.appenchild(ele1);

   3.ele.removeChild(ele1);

   4.ul.insertBefore(li3,li1);

   5.ul.replaceChild(li3,li2);

在一些案例中反复用到了一种思想（先整体变成一种颜色，然后只更改那个要变的ele）

                                Dom4

1.水果排序案例（占了很大部分）

     

2.定时器是重点