JavaScript_Dom_API

1、 node  (  html中所有的内容都可以认为是节点,比如:doctype、html、head、注释、div内容"hello"、空格、回车都是节点  )

  1)获取节点基本信息的属性:

    nodeType;  节点类型

    nodeName;  元素的标签名

    nodeValue;  元素的值

  2)表示层次结构的属性:

    parentNode;  父节点

    parentElement;  父元素

    ownerDocument;  当前元素所在的文档对象

    childNode;  孩子节点

    firstChild;  childNode的第一个节点

    lastChild;  childNode的最后一个节点

    nextSibling;  兄弟节点的下一个节点

    previousSibling;  兄弟节点的前一个节点

  3)其他方法:

    (1)父节点调用的方法:

      appendChild();  向childNode列表末尾添加一个节点

      insertBefore(new,reference);  插入一个新节点。new:要插入的节点;reference:作为参照的节点

      replaceChild(new,old);  替换一个节点。new:要插入的节点;reference:要替换的节点

      removeChild(v);  移除一个节点。v:要移除的节点

      cloneNode([boolean]);  复制节点。如果参数为true,表示深复制

2、Document  (  文档,表示整个html文档或者xml文档,一般情况下一个html可以使用一个Document的实例来表示,即document  )

  1)查找元素的方法:

    getElementById();  获取元素ID

    getElementsByClassName();  获取元素class名字

    getElementsByTagName();  获取元素标签名

    getElementsByName();  获取元素的名字

  2)选择器:

    querySelector();  返回文档中匹配指定 CSS 选择器的一个元素

    querySelectorAll();  返回与指定的选择器组匹配的文档中的元素列表

3、Element  (  元素,html文档中的所有的元素都可以映射为一个Element实例  )

  1)元素层次结构相关属性:

    children;  孩子节点(仅包含  Element  对象)

    firstElementchild;  第一个孩子元素节点

    lastElementchild;  最后一个孩子节点

    nextElementSibling;  下一个兄弟元素节点

    previousElementSibling;  上一个兄弟元素节点

    innerHTML;  获取或设置一个元素内的html内容

    innerText;  获取或设置一个元素内的文本内容

    textContent;  

  2)属性相关方法:

    getAttribute(key);  取得自定义属性。key:为 实际元素的属性名

    setAttribute(key,val);  设置属性。key:为要设置的特性名;val:为对应的值,如果值存在,替换

    removeAttribute();  移除指定的属性

    querySelector(选择器);  返回文档中匹配指定 CSS 选择器的一个元素

    querySelectorAll(选择器);  返回与指定的选择器组匹配的文档中的元素列表

4、Text  (  文本,文本内容,如下"hello world"表示文本内容  <div>hello world</div>  )

  1)文本节点

    length;  文本长度

    appendData( text );  追加文本

    deleteData(beginIndex,count);  删除文本 

    insertData(beginIndex,text);  插入文本

    replaceData(beginIndex,count,text);  替换文本

    splitText(beiginIndex);  从beiginIndex位置将当前文本节点分成两个文本节点

    document.createTextNode();  创建文本节点,参数为要插入节点中的文本

    substringData(beiginIndex,count);  从beiginIndex开始提取count个子字符串

5、Comment  (  注释,如下:<!-- 注释内容 -->  )