js中属性节点的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//关于节点的属性：nodeType,nodeName.nodeValue
//在文档中，任何一个节点都有这三个属性
//而id,name,value是具体节点的属性
window.onload = function(){
//1,元素节点的这三个属性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType);//元素节点：1
alert(bjNode.nodeName);//节点名：li
alert(bjNode.nodeValue);//元素节点没有nodeValue属性值：null
//2,属性节点
var nameAtr = document.getElementById("name").getAttributeNode("name");
alert(nameAtr.nodeType);//属性节点：2
alert(nameAtr.nodeName);//属性节点的节点名：属性名name
alert(nameAtr.nodeValue);//属性节点的nodeValue属性：属性值username
//3,文本节点
var textNode = bjNode.firstChild;
alert(textNode.nodeType);//文本节点：3
alert(textNode.nodeName);//节点名：#text
alert(textNode.nodeValue);//文本节点的nodeValue属性值：文本值本身：北京
//nodeType、nodeName是只读的
//而nodeValue是可以被改变的
//以上三个属性，只有在文本节点中使用nodeValue读写文本时使用最多
}
</script>
</head>
<body>
<p>你喜欢那个城市</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>香格里拉</li>
<li>天山</li>
</ul>
<br><br>
<p>你喜欢那个游戏</p>
<ul id="game">
<li id="rl">贪吃蛇</li>
<li>搬箱子</li>
<li>魔兽</li>
<li>lol</li>
</ul>
<br><br>
name:<input type="text" name="username" id ="name" value="你是个傻瓜"/>
</body>
</html>
js中属性节点的应用的更多相关文章
- js中属性类型：数据属性与访问器属性
js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...
- js中DOM 节点的一些操作方法
什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...
- JS中"属性"的用法
JS的属性和C#有相似之处 ! 使用get和set来进行属性的获取和设置 var obj={ a:"1", get age(){ return obj.a; }, set age ...
- js中对节点属性的操作和对节点的操作
常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...
- js中的节点遍历+类数组对象
firstChild 第一个子元素 lastChild 最后一个子元素 childNodes[n] = childNodes.item(n) 第n+1个子元素 parentNode ...
- js中属性和方法的类型和区别
对象的属性:私有属性(var).类属性(静态属性).对象属性(this).原型属性(prototype). 对象的方法: 私有方法(funtion).类方法(静态方法).对象方法(this).原型方法 ...
- 原生JS中DOM节点相关API合集
节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...
- JS中Text节点总结
文本节点有Text类型表示,包含的是可以找字面解释的纯文本内容.纯文本中可以包含转移后的HTML字符,但不能包含HTML代码.Text节点具有以下属性: 1.nodeType的值为3. 2.nodeN ...
- JS中Document节点总结
document对象是documentHTML的一个实例,也是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. Document节点的子节点可以是DocumentTy ...
随机推荐
- div+css:div中图片垂直居中
div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- windows多线程编程实现 简单（1）
内容:实现win32下的最基本多线程编程 使用函数: #CreateThread# 创建线程 HANDLE WINAPI CreateThread( LPSECURITY_ATTRIBUTES lpT ...
- Android自定义属性简单使用说明
原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_attrs.html 本文从实用角度说明Android自定义属性的基本使用流程,清晰 ...
- Navicat Premium 的常用功能
1.快捷键 1.1. F8 快速回到当前对象列表 1.2. Ctrl + q 打开查询界面 1.3. Ctrl + d 快速修改当前的表结构 1.4. Ctrl + r 运行当前查询界面里面的 sql ...
- JAVA文档注释标签
1 常用Java注释标签(Java comment tags) @author 作者 @param 输入参数的名称 说明 @return 输出参数说明 @since JDK版本 @version ...
- Request.Form接收不到post数据.
Request.Form接收不到post数据. https://q.cnblogs.com/q/62635/ Content-Type 有没有设置为 application/x-www-form-ur ...
- gradle多模块开发
参考文档:gradle的官方userguide.pdf文档的chapter 55和chapter 56.gradle的多模块或项目开发一定不会比maven差,在我看来!大的项目分成多个模块来开发是常事 ...
- R语言 批量规划求解
昨天读到一个项目,是关于优化求解的. 约束条件如下: 公司里有很多客户,客户之所以不继续用我们的产品了,是因为他账户余额是负的,所以,为了重新赢回这些客户,公司决定发放优惠券cover掉客户账户的负余 ...
- REDHAT一总复习1 cups 打印服务配置
停止cups服务 $ sudo systemctl stop cups $ sudo systemctl status cups 配置cups服务,使其不在系统启动时启动 $ sudo systemc ...
- Linux下配置python环境