码迷,mamicode.com
首页 > 其他好文 > 详细

DOM 知识点梳理(笔记)

时间:2017-09-27 11:39:45      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:app   alert   some   部分   开发   过程   ref   script   数值   

  1998年10月DOM1级规范成为了W3C的推荐标准,为基本的文档结构及查询提供了接口。

一、Node类型

  每个节点都有个nodeType属性,表明了节点的类型。共有12种类型:

     元素节点                   Node.ELEMENT_NODE(1)

     属性节点                   Node.ATTRIBUTE_NODE(2)

     文本节点                   Node.TEXT_NODE(3)

    CDATA节点                    Node.CDATA_SECTION_NODE(4)

    实体引用名称节点        Node.ENTRY_REFERENCE_NODE(5)

    实体名称节点             Node.ENTITY_NODE(6)

    处理指令节点             Node.PROCESSING_INSTRUCTION_NODE(7)

    注释节点                      Node.COMMENT_NODE(8)

    文档节点                      Node.DOCUMENT_NODE(9)

    文档类型节点            Node.DOCUMENT_TYPE_NODE(10)

    文档片段节点            Node.DOCUMENT_FRAGMENT_NODE(11)

    DTD声明节点                 Node.NOTATION_NODE(12)

 

  这12个类型并不完全受到浏览器的支持;而开发人员常用的就是前三个(元素节点,属性节点,文本节点)

 if(someNode.nodeType==3){
//为了兼容ie,通常将noteType的属性值与数值进行比较
}

  此外节点还有nodeNames和nodeValue这两个属性。而这二个属性的值完全取决于节点的类型。

 

1)对于nodeName来说  

  元素节点的 nodeName 是标签名称。
  属性节点的 nodeName 是属性名称。
  文本节点的 nodeName 是 #text。
  文档节点的 nodeName 是 #document。

 

2)对于nodeValue来说

  文本节点的nodeValue 属性包含文本。
  对于属性节点的nodeValue 属性包含属性值。
  文档节点的nodeVlaue为null。
  元素节点是nodeVlaue为null。

 

 

1.1节点关系:

  每个节点都有一个childNodes属性,其中保存着一个NodeList对象,它是基于DOM结构动态执行查询的结果而不是一张初次访问时的快照。

每个节点也都有个parentNode节点,该属性指向文档节点的父节点。childNodes列表中所有的节点都具有相同的父节点。而且它们之间都是同胞节点,可以通过previousSiblingnextSibling互相之间访问,父节点的firstChildlastChild分别指向childcNodes列表的第一个和最后一个j节点。

 

1.2操作节点

appendChild()方法:

  用于向父节点的chidNodes末尾添加一个节点。如果传入到appendChild()的节点已经是文档中的一部分了,那么该节点会从原来的位置转移到新的位置上。

例如:

<div id="ss">hi 
<p>1</p>
<
p>2</p>
<
p>3</p>
</div> <script> var ss=document.getElementById("ss"); ss.appendChild(ss.firstChild); alert(ss.lastChild.nodeValue);//hi 第一个文本节点 变成了最后一个节点 </script>

 insetBefore()方法:

  这个方法接受二个参数:要插入的节点和作为参照的节点。插入后被插入的节点会变成参照节点的前一个同胞节点。

  如果参照节点是null那么执行和appendChild相同的操作。

 replaceChild()方法:

  这个方法接受二个参数:要插入的节点和要替换的节点。返回替换的节点。

 removeChild()方法:

  这个方法接受一个参数,即要移除的节点。返回被移除的节点。

上面的四个方法在调用时,都是在某个节点的子节点上操作,所以都必须先取得它们的父节点!

 cloneNode()方法:

该方法接受一个布尔型参数表示是否进行深浅负责,为true时执行深复制(复制节点及其整个子节点树),为false时执行浅复制(只复制节点本身)。

var ss=document.getElementById("ss");var tt=ss.cloneNode(true);
  ss.appendChild(tt);//复制完后,为他指定父节点,将它添加到文档中

 

二、Document类型

  document对象是HTMLDocument的一个实例,表示整个HTMl页面。

  可以通过document.documentElement和document.body来取得对<html>和<body>的引用

文档信息:

document.title包含着<title>元素中文本的引用。

document.URl包含着页面完整的URl。

document.domain包含着页面的域名。它是可读取也可设置的,进而可以对二个页面进行通信设置。

document.referrer保存着链接到当前页面的那个页面的URl。

 查找元素:

document.getElementById();

document.getElementsByTagName();

 

特殊集合:

document.anchors  包含文档中所有带name特性的<a>标签 

document.forms   包含文档中所有的<form>元素

document.images   包含文档中所有的<img>元素

document.links    包含文档中所有带href特性<a>元素

 文档写入:

document.write()或writeln()

  可以在页面加载过程中动态的向页面加入内容。

三、Element类型

 

DOM 知识点梳理(笔记)

标签:app   alert   some   部分   开发   过程   ref   script   数值   

原文地址:http://www.cnblogs.com/rain-null/p/7595442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!