javascript学习日记之DOM

[TOC]

1.定义：

DOM全称为“Document Object Model” 文档对象模型。其实说白了就是针对HTML文档的一个API(应用程序接口)
DOM 把HTML文档描绘成一个层次化的节点数(树形结构) ，以便开发人员增删改查 进行各种操作

DOM Tree

如上图所述 DOM 树形结构 而元素 标签(<a>) 就是节点 也是DOM最小组成单位。

2.节点（Node）

DOM1定义了一个node接口，以实现所有node节点类型
其中nodetype属性，可以知道属于哪种节点类型

3.查找元素的常用三个方法

getElementById    // 通过id查找
getElementsByTagName //通过标签名查找
getElementsByClassName  // 通过类名查找

4.获取元素的常用属性

- parentNode  //父节点
- childNodes //字节点[]
- offsetParent //获取当前元素定位的父级元素节点
- firstChild   //获取父元素下的第一个子节点
- lastChild   //获取父元素下的最个一个子节点
- nextSibling  //获取紧跟在当前节点后面的第一个同级节点，没有为null 
- previousSibling //获取当前节点前面的、距离最近的一个同级节点 没有则为null

5.操作节点常用方法

- appendChind() //填加子节点为最后
- insertBefore() //插入节点为指定的位置（接受两个参数：插入的节点，作为参照的节点）
- replaceChind() //替换节点
- removeChind() //移除节点
- cloneNode()  //复制节点 参数是布尔值 就是false 和true(深复制)
- hasChildNodes() //是否有子节点

6.做个DOM操作的小例子

比如像发微博一样 需要一个文本框 一个按钮 然后 输入内容 点一下按钮就会出现 下面就会出现写的内容

  <textarea id="text"> </textarea>
  <input id = "button" type="button" value="发布">
  <ul id ="ul">
      <li>今天真开心</li>
  </ul>

window.onload=function ()
 {
    var Btn=document.getElementById('button');
    var Txt=document.getElementById('text');
    var Ul=document.getElementById('ul');
    
    Btn.onclick=function ()
    {
        var Li=document.createElement('li');//创建元素标签
        
        Li.innerHTML=Txt.value; 
     Ul.appendChild(Li);//添加到最后一个子标签
    }
}