JavaScript DOM编程 学习笔记-节点属性

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
	//关于节点的属性:nodeType  nodeName  nodeValue
	//在HTML文档中,任何一个节点都有这三个属性
	//id name value是具体节点的属性
	window.onload = function() {
		//元素节点的三个属性
		var bjNode = document.getElementById("bj");
		alert(bjNode.nodeType);//元素节点:1
		alert(bjNode.nodeName);//LI
		alert(bjNode.nodeValue);//null

		//属性节点
		var nameAttr = document.getElementById("username").getAttributeNode("name");
		alert(nameAttr.nodeType);//属性节点:2
		alert(nameAttr.nodeName);//name
		alert(nameAttr.nodeValue);//username

		//文本节点
		var textNode = bjNode.firstChild;
		alert(textNode.nodeType);//文本节点:3
		alert(textNode.nodeName);//#text
		alert(textNode.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>

	<ul id="book">
		<li id="xyj" name="xyj">西游记</li>
		<li>三国演义</li>
		<li>水浒传</li>
	</ul>

	name:<input type="text" name="username" id="username" value="umgsai"/>
	<br />
</body>
</html>
时间: 2024-10-01 07:58:35

JavaScript DOM编程 学习笔记-节点属性的相关文章

JavaScript DOM编程 学习笔记-删除节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //测试removeChild()方法  删除节点 window.onload = function() { //alert(1

JavaScript DOM编程 学习笔记-创建并接入节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //新创建一个元素节点,并把该节点添加为文档中指定节点的子节点 window.onload = function() { //创

JavaScript DOM编程 学习笔记-获取元素节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { //在编写html文档时需要确定id属性值是唯一的 //该方法为doc

JavaScript DOM编程 学习笔记-替换节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { //测试replaceChild()方法 var bjNode = d

JavaScript DOM编程 学习笔记-两个小示例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { //点击每个li节点都弹出其文本值 var liNodes = doc

JavaScript DOM编程 学习笔记

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //整个HTML文档加载完成之后出发window.onload事件,事件出发后执行function函数体 window.onlo

DOM编程 学习笔记(一)

PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的研究那些动态效果 的制作,实在是太炫酷了...先开始DOM的基本语法吧...等DOM和JQuery的基本语法和用法搞定后就去深入的研究 研究那些动态效果的制作... DOM编程 学习内容 1.DOM简单介绍 2.DOM解析方式 3.在网页中使用DOM编程 4.DOM window对象以及Loacti

轻松学习JavaScript二十二:DOM编程学习之节点操作

DOM编程不仅仅可以查找三种节点,也可以操作节点,那就是创建,插入,删除,替换和复制节点.先来看节点 操作方法: 还是借用一贯的HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

JavaScript面向对象编程学习笔记

1  Javascript 面向对象编程 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上. 自动含有一个constructor属性,指向它们的构造函数. Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系. Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象.这个对象的所有属性和方法,都会被构造函数的实例继承.