js-DOM操作-dom1

DOM是针对xml并经过扩展应用于html的应用程序编程接口，前端工程师借助DOM并使用前端脚本语言来拥有对页面内容及结构的控制权。

• DOM可以将任何html或xml文档描绘成一个“多层节点结构”。
• DOM对象中拥有许多不同类型的节点，这些节点都继承自Node类型，因此所有节点都共享着相同的属性和方法。

【节点的共有属性及方法】

• 属性：nodeType，该属性表明节点的类型。
  <p id="p">我是一个段落</p>
  var node=document.getElementById('p');
  alert(node.nodeType)//1
  alert(node.childNodes[0].nodeType)//3
  alert(node.ownerDocument.nodeType)//9
  这是一个例子，nodeType的值是从1~12的数字，分别表示各种不同的类型，例子中，node是<p>他是一个元素节点，nodeType=1；他的子节点是文本节点，nodeType=3；它属于的文档是一个文档节点，nodeType=9；
  还有很多节点类型，只是我没咋看见，所以先不写了。
• 属性：childNodes，该属性保存着一个NodeList对象，它是一种类 数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
  var n1=node.childNodes[0];
  var n2=node.childNodes.item(1);
  var length=node.childNodes.length;
  发现该属性的表现形式类似数组，但他并不是Array的实例。但是我们可以将它转化为数组。参考arguments对象如何转化为数组
• 属性：parentNode，该属性指向文档树中的父节点。
• 属性：previousSibling,该属性表示该节点的前一个兄弟节点。如果该节点为第一个兄弟节点，那么该属性值为null。
• 属性：nextSibling,该属性表示该节点的后一个兄弟节点。如果该节点为最后一个兄弟节点，那么该属性值为null。
• 属性：firstChild，该属性表示该节点的第一个子节点。
• 属性：lastChild，该属性表示该节点的最后一个子节点。
• 属性：owerDocument，该属性表示整个文档的文档节点。
• 方法：hasChildNodes()，该方法在节点包含一个或多个子节点时返回true。
• 方法：appendChild()，该方法用于向列表的末尾添加一个节点。
  node.appendChild(newnode);
• 方法：insertBefore()，该方法用于在指定节点之前插入一个节点。下面这个例子是在空节点之前插入，也就是放在最后咯。
  node.appendChild(newnode,null);
• 方法：replaceChild()，该方法是要替换某个节点，所以接受两个参数，第一个是新节点，第二个是被替换的节点。
  node.replaceChild(newnode,node.childNodes[0])
• 方法：removeChild()，这个方法只有一个参数就是要移除的参数。
  node.removeChild(node.childNodes[0]);
• 方法：cloneNode()，用于为调用这个方法的节点创建一个副本，接受两个参数，true：表示深度复制，及复制节点及其整个子节点树。false：执行浅复制，只复制节点本身。
  var newnode=node.childNodes[0].cloneNode(true);
  node.appendChild(newnode);
• 方法：normalize()，作用时连接该节点内的两个文本节点之间的空白。

【需要注意】新增、插入、替换、移除节点都是针对父节点的方法。父节点应用这些方法来调整子节点。

【Document类型】

文档节点是每个文档的根节点，节点即对象，文档节点及document对象是HTMLDocument的一个实例，是window对象的一个属性，所以可将其作为全局对象来访问。

• 该对象的属性：
  alert(document.nodeType);//9
  alert(document.nodeName);//#document
  alert(document.nodeValue);//null
  其余呢，没有父节点，所以为null，没有所属文档，本身就是一个文档，存在子节点。
• 子节点
  var body=document.body;
  var html=document.documentElement;
  另外还有文档类型节点，注释节点，也都可能是document的子节点，但是由于浏览器之间差异性太大，也没什么用，我就不多深理解啦。
• 文档信息
  • title:包含着,<title>元素中的文本
    document.title='test';
  • 与网页请求有关的三个属性：url domain referrer
  • url属性包含页面完整的url（即地址栏中显示的url）
  • domain属性中只包含页面的域名
  • referer属性是来源页面的URL，可能会包含空字符串

这三个属性，只有domain是可以设置的，但不能给domain设置任何值。只有domain值一样的页面，才可以互相访问对方包含的js对象。
所有这些请求都包含在请求的http头部，只不过是通过这些属性，让我们能够访问他们而已。

• 查找元素
  • 方法一：接受一个取得元素的id
    var node=document.getElementById('a');
    【注意】
    1、IE8及较低版本不区分大小写，所a与A会被认为是一样的，但是其他浏览器都会区分。
    2、IE7及较低版本会有一个怪癖：当（input、textarea、button、select）的name属性与给定参数id的值一样时，且前者在真正的id前面时，会被取代。
  • 方法二：要取得元素的标签名
    var nodes=document.getElementsByTagName('p');
    这个方法会返回一个HTMLCollection对象，作为一个动态集合，该对象与nodelist对象很相似，可以用.item(index) 、[index]来访问集合中的元素。
    但是HTMLCollection对象有自己的方法，.namedItem(string)、[string]利用名字来访问集合中的某一个元素。
  • 方法三：要取得元素的name
    var radios= document.getElementsByName('color')；
    这个也会返回一个HTMLCollection对象。