开发工具与关键技术:visual Studio jquery
作者:邓伟征
撰写时间:2019年5月14日
getAttribute()方法 通过元素节点的属性名称获取属性的值。
/*
语法:elementNode.getAttribute(name)
说明:
1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。
2. name:要想查询的元素节点的属性名字*/
var list = document.getElementsByTagName(“li”);
for (var i = 0; i < list.length; i++) {
var text = list[i].getAttribute(“title”);
if (text!=null) {
document.write(text+"
");
课程列表
- Safari
- CSS
- gsgfa
- RQRA
- GAGF
- Html5
以下为获取的不为空的li标签title值:
setAttribute()方法
/* setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
语法:elementNode.setAttribute(name,value)
说明:
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意:
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。
2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。
/
for (var i = 0; i < list.length; i++) {
list[i].setAttribute(“name”,“lis”);//浏览器看结果
}
节点属性
/
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :
1. nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
一、nodeName 属性: 节点的名称,是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性:节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种节点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9*/
var lists = document.getElementsByTagName("li");
for (var i = 0; i < lists.length; i++) {
document.write(lists[i].nodeName + "<br/>");
document.write(lists[i].nodeValue + "<br/>");
document.write(lists[i].nodeType + "<br/>");
}
//访问子节点childNodes
/访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:elementNode.childNodes
注意:
如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。/
var x = document.getelementsbytagname(“ul”)[0].childnodes;
document.write(“ul子节点个数:” + x.length + “
”);
document.write(“节点类型:” + x[0].nodetype + “
”);
/*运行结果:
IE:(IE8.0及其以下版本的浏览器会忽略节点间的空白节点(空格、回车和Tab键),遵循W3C规范的浏览器(Chrome、FireFox、Safari等)则会把这些空白作为文本节点处理。)
UL子节点个数:5
节点类型:1
其它浏览器:
UL子节点个数:11
节点类型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7
-
空白节点
- html
- 空白节点
- css
- 空白节点
- javascript
- 空白节点
- jquery
- 空白节点
- html5
- 空白节点
如果把代码改成这样:
- HTML
- CSS
- JavaScript
- Jquery
- Html5
运行结果:(IE和其它浏览器结果是一样的)
访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.lastChild
说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
var uls = document.getelementsbytagname("ul")[0];
console.log(uls);
console.log(uls.firstchild);
console.log(uls.lastchild);