Dom对象 控制HTML元素

Dom对象 控制HTML元素
HTML文档可以说由节点构成的集合，DOM节点有:1、元素节点：上图中、、

等都是元素节点，即标签。2、文本节点:向用户展示的内容，如

• …
• 中的JavaScript、HTML、CSS等文本。
  节点属性：
  nodeName 返回一个字符串，其内容是给定节点的名字
  nodeType 返回一个整数，这个数值代表给定节点的类型
  nodeValue 返回给定节点的当前值
  遍历节点树：
  childNodes 返回一个数组，这个数组由给定元素节点的子节点构成
  fristChild 返回第一个子节点
  lastChild 返回最后一个子节点
  parentNode 返回一个给定节点的父节点
  nextSibling 返回给定节点的下一个节点
  previousSibling 返回给定节点的上一个节点
  DOM操作：
  方法如下
  createElement(element) 创建一个新的元素节点
  createTextNode() 创建一个包含着给定文本的新文本节点
  appendChild() 指定节点的最后一个子节点列表之后添加一个新的子节点
  insertBefore() 将一个给定节点插入到一个给定元素节点的给定子节点的前面
  removeChild() 从一个给定元素中删除一个字节点
  replaceChild() 把一个给定父元素里的一个子节点替换为另一个节点

  getElementsByName()方法 返回带有指定名称的节点对象的集合
  语法：document.getElementsByName(name)与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
  注意：
  1.因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
  2.和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
  function getnum()
  {
  var mynode = document.getElementsByName(“myt”);
  alert(mynode.length);
  }
  getElementsByTagName()方法：
  返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
  语法: document.getElementsByTagName(Tagname)
  说明：

  1. Tagname是标签的名称，如p、a、img等标签名。
  2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始
     var list = document.getElementsByTagName(“li”);
     for (var i = 0; i < list.length; i++) {
     console.log(list[i].innerHTML);
     }
     区别getElementByID,getElementsByName,getElementsByTagName：
     以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等
  3. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
  4. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
  5. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)
     window.onload = function () {
     var parent = document.getElementById(“test”);
     var node = document.getElementsByTagName(“input”)[0];
     var p = document.createElement(“p”);
     p.innerHTML = “p标签”;
     parent.insertBefore(p,node);
     }