DOM与BOM

DOM

Document Object Model 文档对象模型

节点

节点属性

//=======结构=======

aaaa
 

        
        
        
    
    

        
        
        
    

a.nodeName

节点名 如果是标签 节点名就是标签名，大写

  var div=document.getElementById("div1");
         console.log(div.nodeName);//-----DIV

b.nodeType 节点类型
1.元素 2.属性 3.文本 4.注释 5.文档

c.nodeValue 节点值

文本内容和注释内容，标签没有节点值null

获取DOM元素

    //===通过id获取元素列表
    document.getElementById("div1");

    //===通过class获取元素列表 HTMLCollection
    document.getElementsByClassName("div");

    //===通过标签名获取列表 HTMLCollection
    document.getElementsByTagName("div")

    //===通过name获取元素 大多数用于表单  NodeList  必须使用document
    console.log(document.getElementsByName("name"))


    //===可以通过选择器获取元素  如果有多个div使用选择器div时只能获取到列表中的第一个
    document.querySelector("div.div1");
    document.querySelector("div[type~=a]");

    //===可以通过选择器获取所有元素列表  NodeList
    document.querySelectorAll("div")


    var div=document.getElementById("div1");
    var span=div.getElementsByTagName("span");
    console.log(span)

节点遍历

 var div=document.getElementById("div1");
        console.log(div.parentNode);  父节点
        console.log(div.parentElement); 父元素

        console.log(div.childNodes); 子节点 NodeList
        console.log(div.children); 子元素  HTMLCollection

        console.log(div.firstChild)   第一个子节点
        console.log(div.firstElementChild)  第一个子元素


        console.log(div.lastChild)   最后一个子节点
        console.log(div.lastElementChild)  最后一个子元素


        console.log(div.previousSibling)   上一个兄弟节点
        console.log(div.previousElementSibling)  上一个兄弟元素

        console.log(div.nextSibling)  下一个兄弟节点
        console.log(div.nextElementSibling) 下一个兄弟元素

创建元素

把子元素添加在父元素的尾部
  //====创建元素====
   var div=document.createElement("div");
   //===把子元素添加在父元素的尾部===
   document.body.appendChild(div);

给ul里拼接10个li
    var ul=document.createElement("ul");
    for(var i=0;i<10;i++){
        var li=document.createElement("li");
        ul.appendChild(li);
    }
    document.body.appendChild(ul);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    //===创建文档碎片
   var a=document.createDocumentFragment();
   //===循环
	  for(var i=0;i<100;i++){
	      var div=document.createElement("div");
	      a.appendChild(div);
	  }
	  document.body.appendChild(a);

    将子元素插入到父元素的尾部
      父元素.appendChild(子元素);

    将元素插入在父元素中某个子元素的前面
       父元素.insertBefore(新元素,插入在谁的前面);
        // var div=document.createElement("div");
        // document.body.insertBefore(div,document.body.firstChild);
        
    复制元素
       需要复制的元素.cloneNode(是否深复制));
       //====深复制（true）--复制子元素   浅复制（false）--不复制子元素
       var bn=document.querySelector("button");
       var bn1=bn.cloneNode(true);
        document.body.appendChild(bn1);
        
       深复制  将该元素的节点和所有子节点及后代节点全部复制
       浅复制  只复制当前元素

      删除元素
    元素.remove(); 删除
	// bn.remove();
            
    父元素.removeChild(子元素);
   // document.body.removeChild(bn);

    替换
    父元素.replaceChild(新元素,旧元素);
    // var p=document.createElement("p");
    //  document.body.replaceChild(p,bn);

BOM

Browser Object Model 浏览器对象模型

浏览器中JS可以控制所有对象 这些对象都是从属于window对象
document 文档
location 本地
history 历史
screen 屏幕
navigator 导航