JavaScript 中element和attribute以及节点、属性的增删

来源:互联网 发布:nginx 图片服务器架构 编辑:程序博客网 时间:2024/03/29 12:39



一、 getElementById(String XX)  返回对拥有指定id的第一个对象的引用
使用方法  var intputNode = document.getgetElementById("tid");
获得Id值为td的第一个【元素节点】的对象的引用,
<input type="text" name="username" value="大数据1601班" id="tid"/>
<input type="text" name="username" value="大数据1602班" id="tid"/>
<input type="text" name="username" value="大数据1603班" id="tid"/>
<input type="button" value="提交"/>
<p id="pid">学习愉快</p>

var intputNode = document.getgetElementById("tid");
1.inputNode.id    返回值是该对象的id值;即:tid;
2.inputNode.value  返回值是该对象的value值 即:大数据1601班;
3.inputNode.type   返回值是该对象的type的值 即type;
4.inputNode.nodeName 返回的是该对象的元素标签名即:INPUT;
5.inputNode.nodeValue 在元素节点中返回的永远是null 即:null;
6.inputNode.nodeType  元素节点返回的是1  属性节点返回的是2  文本节点返回的是3 。即:1;


二、 var arr=document.getElementsByName("username")  通过元素的name属性获得带有指定名称的对象集合  注:返回值为集合
var arr=document.getElementsByTagName("input")  通过元素的标签获取指定名称的对象集合   注:返回值为集合

以上二个  返回值的顺序是它们在文档中的顺序,传递的字符串不分大小写,如果把特殊字符串"*" 传递给getElementByTagName方法,它将返回文档中所有元素的列表,元素排列的
顺序就是它在文档中的顺序。

document.getElementsByTagName("p")[3];
获取文档中的第四段落
三、  节点的查找
intNode.hasChildNodes()   判断该节点下是否含有【元素】节点 ,若有返回true,否则返回false.
intNode.firstChild  返回指定节点的首个子节点 的对象引用
intNod.paraentNode返回指定节点的父节点的对象引用
1.查找【元素】节点
var intputNode = document.getgetElementById("tid");

inputNode.id    返回值:tid;
inputNode.value返回值:大数据1601班;
inputNode.type  返回值:type;
inputNode.nodeName  返回值:INPUT;
inputNode.nodeValue 返回值:null;
inputNode.nodeType  返回值:1;
2.查找属性节点

var intputNode = document.getgetElementById("tid");
var p = intput.getAttributeNode("name");
p.value  返回值:username;
p.type  返回值:undefined;
p.nodeName  返回值:name;
p.nodeValue 返回值:username;
p.nodeType  返回值:2;
3.查找文本节点
var intputNode = document.getgetElementById("pid");
var p = intput.firstChild;
p.value  返回值:undefined;
p.type  返回值:undefined;
p.name返回值:undefined;
p.nodeName  返回值:#text;
p.nodeValue 返回值:学习愉快;
p.nodeType  返回值:3;
三、 HTML DOM中带有Attribute的方法的使用
1.getAttributeNode("属性名") 返回该属性名对象的引用
var intputNode = document.getgetElementById("tid");
var p = intput.getAttributeNode("name");
p.nodeName  返回值:name;
p.nodeValue 返回值:username;
p.nodeType  返回值:2;
2.getAttribute("属性名") 返回该属性的内容
var intputNode = document.getgetElementById("tid");
var p = intput.getAttribute("name");返回值:username;
3.setAttribute(key,value) 向元素中添加指定的元素节点,
初始的元素<inputname="username" value="大数据1601班" id="tid"/>
通过id获得该元素的对象引用var intputNode = document.getgetElementById("tid");
向元素中添加指定的元素节点intputNode.setAttribute("type","text");
添加后的元素<input type="text" name="username" value="大数据1601班" id="tid"/>
4.setAttributeNode(属性对象)
5.createAttribute(属性)  创建一个属性节点

增加class属性
var atr=document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(atr);
6.createElement(标签)  创建一个元素节点
var li= document.createElement("li");
  li.setAttribute("id", "xg");
  li.setAttribute("value", "hongkong");
7.createTextNode(文本信息)  创建一个文本节点
  8. appendChild()  向节点处添加一个子节点
var txt= document.createTextNode("香港");
    li.appendChild(txt);
    9.insertBefore()  在子节点之前添加一个子节点
    var city = document.getElementById("city");
    var cd = document.getElementById("cd");
    city.insertBefore(li, cd);
    10.nextSibling  返回指定节点之后紧跟的节点,在相同的树层级中
   
var li= document.createElement("li");
  li.setAttribute("id", "xg");
  li.setAttribute("value", "hongkong");
  var txt= document.createTextNode("香港");
li.appendChild(txt);
  var city = document.getElementById("city");
  var bj = document.getElementById("bj");
  var temp = bj.nextSibling;//
   ity.insertBefore(li, temp);
11.removeChild :指定元素的某个指定的子节点。

var bj = document.getElementById("bj");
      var city = bj.parentNode;
  city.removeChild(bj);













0 0
原创粉丝点击