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
- JavaScript 中element和attribute以及节点、属性的增删
- 在Xslt中如何创建元素(Element)和属性(attribute)
- javascript中 addEventListener和attachEvent以及element.onclick的区别
- js(javascript>中关于节点的方法和属性
- JavaWeb_01_Dom4j操作节点元素和属性的增删改查
- javascript中操作节点的属性
- 使用JavaScript控制html中节点的增删改
- CXF生成qualified的element和attribute
- JavaScript 节点的属性
- Dom4j 中Node节点 和Element元素的区别
- javascript增删节点以及如何操作下拉列表select和option(源代码)
- http请求中Parameter(参数) 和Attribute(属性)的区别
- javascript节点属性和方法
- 【JavaScript】网页节点的增删改查
- javascript节点的增删改查
- css属性选择器中[attribute~=value] 和 [attribute*=value]的区别
- JavaScript 中 Property 和 Attribute 的区别详解
- JavaScript 中 Property 和 Attribute 的区别详解
- DOS常用命令
- 帝国CMS常用标签
- linux读写mac HFS+
- 手机端通过软件Es文件浏览器访问Linux服务器文件(局域网或远程服务器)
- CSS学习笔记:排版布局属性
- JavaScript 中element和attribute以及节点、属性的增删
- 哈理工OJ 1045 Draw A Square(简单模拟)
- Linux中的高级文本处理命令,cut命令,sed命令,awk命令
- Zookeeper 配置文件解释
- 【浑水摸鱼】化学方程式默写练习器
- 算法训练 未名湖边的烦恼
- hdu 2087
- 使用TensorFlow编写识别数字的CNN训练程序详解
- 汇编语言----中断指令