Js核心—— DOM

DOM：document objert model 文档对象模型

BOM:browser object model 浏览器对象模型

节点：
                节点种类：元素节点(标签)   文本节点(内容)  属性节点   等十二种
                节点关系：兄弟节点   父子关系    父节点 子节点  兄弟节点
                节点对象：属性和方法

innerHTML  开始标记和结束标记之间的内容
            document  文档对象
                body

节点对象的属性：
                childNodes     获取所有的子节点(元素节点、文本节点)    NodeList   索引 0    length  节点个数
                firstChild
                lastChild
                parentNode  父节点
                previousSibling   上一个兄弟节点
                nextSibling    下一个兄弟节点

案例

	

		
你好
		
我好
	

	

		
AAAA
		
AAAA
		
AAAA
最后
	

	
AAA
AAA
AAA

            document  文档对象

                属性：
                    body         body元素对象
                    title        标题
                    URL          网页地址

                    links          超链接    HTMLCollection  集合  索引  0       length
                    images         图片
                    forms          

                方法：
                    write
                    writeln
                    getElementById      根据ID查找节点对象
                            返回值：   节点对象，null

案例

	

		
AAA
		
BBB
		太
		光
		顿
		
CCC

	
	

		
		
			
	

            节点操作：  增删改查

            增：
                write
                document.createElement      创建节点
                obj.appendChild        追加子节点
            删除节点：
                obj.removeChild
            复制节点：
                cloneNode(flag)      
                    flag  布尔类型    true  复制包含子节点  false  不包含子节点  默认为false
        案例

小案例

    
AAA
  	
    
BBB
    
CCC
 
 
 -->
  
    var o=document.getElementById('box');
 	 var o2= o.childNodes[1];
 	o.removeChild(o2);          //复制节点
  var p=document.createElement('p');
     p.innerHTML='你好';
 	 o.insertBefore(p,o2);
          o.replaceChild(p,o2);
         var a1=o2.cloneNode(true);
 	 o2.appendChild(a1);            //插入节点





 爱好：
 游戏
 唱歌
 跳舞
 

 职业:
 歌手
 舞者
 流浪


 var a=document.getElementById('a1');
  a.checked=true;
      var b=document.getElementById('b1');
     b.checked=true;