6,node
(1)节点名称,值和类型:
l nodeName:其内容是给定节点的名字。
l 如果是元素节点,nodeName返回这个元素的名称。
l 如果是属性节点,nodeName返回这个属性的名称。
l 如果是文本节点,nodeName返回一个内容为#text 的字符串。
l nodeType:返回一个整数,这个数值代表着给定节点的类型。
l Node.ELEMENT_NODE ---1 -- 元素节点
l Node.ATTRIBUTE_NODE ---2 -- 属性节点
l Node.TEXT_NODE ---3 -- 文本节点
l nodeValue:返回给定节点的当前值(字符串)。
l 如果给定节点是一个属性节点,返回值是这个属性的值。
l 如果给定节点是一个文本节点,返回值是这个文本节点内容。
l 如果给定节点是一个元素节点,返回值是null。
(2)父节点,子节点,和同辈节点:
l 父节点: parentNode 和 parentElement(只支持IE)
l parentNode 属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。
l document 节点的没有父节点。
l 子节点
l ChildNodes:获取指定节点的所有子节点集合。
l firstChild:获取指定节点的第一个子节点。
l lastChild:获取指定节点的最后一个子节点。
l 同辈节点
l nextSibling: 返回一个给定节点的下一个兄弟节点。
l previousSibling:返回一个给定节点的上一个兄弟节点。
(3)节点属性:
l 节点属性attributes是Node接口定义的属性。
l 节点属性attributes就是节点(特别是元素节点)的属性。
l 事实上,attributes中包含的是一个节点的所有属性的集合。
l attributes.getNameItem()和Element对象的getAttribute()方法类似。
(4)检查子节点和属性:
l 查看是否存在子节点:hasChildNodes()
l 查看是否存在属性:hasAttributes()
l 即使节点中没有定义属性,其attributes属性仍然有效的,而且长度值为0。同样节点中的childNodes属性也是如此。
l 当你想知道某个节点是否包含子节点和属性时,可以使用hasChildNodes()和hasAttributes()方法。但是,如果还想知道该节点中包含多少子节点和属性的话,仍要使用attributes和childNodes属性。
l 在IE浏览器中,不存在hasAttributes()方法!
(5)操纵DOM节点树:
l 插入节点
l appendChild()方法
l insertBefore()方法,注意:没有insertAfter()方法
l 删除节点:removeChild()方法
l 替换节点:replaceChild()方法
(6)复制和移动节点:
l 复制节点:cloneNode(boolean)方法,其中,参数boolean是判断是否复制子节点。
l 移动节点:由以下三种方法组合完成
l 查找节点
l getElementById():通过节点的id属性,查找对应节点。
l getElementsByName():通过节点的name属性,查找对应节点。
l getElementsByTagName():通过节点名称,查找对应节点。
l 插入节点
l appendChild()方法
l insertBefore()方法
l 替换节点:replaceChild()方法
(7)innerHTML属性:
l 浏览器几乎都支持该属性,但不是 DOM 标准的组成部分。
l innerHTML 属性可以用来读,写某给定元素里的 HTML 内容。
l innerHTML 属性多与div或span标签配合使用。
(8)XML DOM访问节点:
l document属性指向 XML 文档的根元素。
l 通过getElementsByTagName()方法可以把指定节点下面的所有特定标记名称的列表返回。
l 如果使用childNodes属性来获取子节点集合时,一般通过item(index)方法,而不是通过数组下标来访问每一个子节点。
(9)XML DOM操作XML文档:
l 创建新节点
l 移动和修改节点
l 读写节点属性和读写数据
以上操作,XML DOM与HTMLDOM的操作完全一致。
l 保存文档
与HTML DOM不同,XMLDOM提供了save()方法将XML文档保存到指定的本地目录。不过,出于安全考虑的原因,一般浏览器禁止这么做。
示例:
// 要求获取id="city"下所有子节点的个数
// //1 获取目标节点
// var city = document.getElementById("city");
//
// //2 获取目标节点的所有子节点
// var children = city.childNodes; //childNodes:获取所有子节点的集合
//
// //3 打印数量
// alert(children.length);
//要求获取id="edu"下所有子节点的个数
// var eduElement = document.getElementById("edu");
// var options = eduElement.childNodes
// alert(options.length);
/*
* * 编写java代码时,只要语法正确,效果就正确
* * 编写javascript代码时,语法正确时,效果不一定正确
* * 在于浏览器如果解析
* * 当编写javascript代码时
* * 不仅要看语法是否正确
* * 还要看浏览器如何解析
例如获取xml中某个元素的所有子节点时,IE浏览器会把换行符也算做一个子节点。
*/
var eduElement = document.getElementById("edu");
var options = eduElement.getElementsByTagName("option");
alert(options.length);
//在标签中查找标签时,只有getElementsByTagName()方法有效!
<body>
<input type="text" id="username" value="itcast">
<p>
明天上课
</p>
</body>
<script type="text/javascript">
//1 元素节点
// var username = document.getElementById("username");
//
// alert(username.nodeName); //input
// alert(username.nodeType); //1
// alert(username.nodeValue); //null
//2 属性节点
// var username = document.getElementById("username");
// var attr = username.getAttributeNode("id");
//
// alert(attr.nodeName); //id
// alert(attr.nodeType); //2
// alert(attr.nodeValue); //username
//3 文本节点
var pElement = document.getElementsByTagName("p")[0];
// var text = pElement.childNodes[0];
// var text = pElement.firstChild;
var text = pElement.lastChild;
alert(text.nodeName); //#text
alert(text.nodeType); //3
alert(text.nodeValue); //明天上课
/*
* nodeName、nodeType、nodeValue
* * nodeType:判断获取的是什么节点
* * nodeValue:获取文本节点的文本内容
* * nodeName:获取元素节点是什么标签
*/
</script>
<body>
<button id="login">登录</button>
<p>
段落
</p>
</body>
<script type="text/javascript">
//复制一个button按钮,追加到p上
var button = document.getElementById("login");
//cloneNode()方法,接收的Boolean类型的参数,是否复制子节点
var copy = button.cloneNode(true);
var pElement = document.getElementsByTagName("p")[0];
pElement.appendChild(copy);
</script>
<body>
<div id="div"></div>
</body>
<script type="text/javascript">
//需要创建一个<h1>今天</h1>插入到div中
//方法一
// var h1Element = document.createElement("h1");
// var text = document.createTextNode("今天");
// h1Element.appendChild(text);
//
// var div = document.getElementById("div");
//
// div.appendChild(h1Element);
//方法二
document.getElementById("div").innerHTML = "<h1>今天</h1>";
/*
* WEB1.0与WEB2.0:
* * WEB1.0:以内容为主(门户网站)
* * WEB2.0:以人的关系为主(社交网站)
* * WEB3.0:基于移动互联网的社交网站
*/
</script>
7,如何编写js文档
在MyEclipse或Eclipse中开发,通常单独写一个js文件,再通过在html或jsp文件中的<head>标签中引入js文档(通过src属性),来编写js文档,耦合度比较高,代码比较清晰。
例如:<script type="text/javascript"src="demo.js"></script>
/*
* 在HTML页面中的任意位置都可以引入javascript脚本
* * head中:一般情况,都是引入外部脚本文件
* * body前:
* * 获取页面元素:不行
* * 定义函数:
* *并调用:
* *函数中包含获取页面元素内容:不行
* *函数中不包含获取页面元素内容:行
* *不调用:可以
* * body后:都可以
*/
//IE和火狐图标:表示支持IE及其他浏览器。
8 ,ECMA入门:// 1 区分大小写:与Java一样。
// var hero;
// var Hero;
//2 变量是弱类型的:与Java不一样。
//按照java编写习惯
//java,定义变量时,类型就已经明确了
// String str;
// Int i;
//javascript,定义变量时,初始化时,类型才明确
// var str;
//3 每行结尾的分号可有可无:与Java不一样。
alert("xxx");
//4 {}括号表明代码块:与Java一样
9,arguments对象
在函数中,可以通过arguments对象获取这个函数的参数数组,是个隐式的对象,在函数中可以直接调用。
例如:
function add(a,b){
alert(arguments.length); //直接通过arguments获取参数数组的长度,打印2
returna+b;
}
应用:可以通过arguments模拟函数的重载:
在javascript中,如果按照类似java中的重载形式编写函数,则最后的函数会覆盖所有的前面的同名函数,无法达到函数重载的效果,可以利用arguments来模拟函数的重载。
Function add(){
if(arguments.length== 1) {
alert(arguments[0] + 5);
} else if(arguments.length== 2){
alert(arguments[0] + arguments[1]);
}
}
add(10);//output 15
add(40,20);//output 60
10,变量的作用域
(1)全局变量:在函数外面定义的变量,在函数外和函数中都可以访问,如果函数中定义了同名变量,则函数中的变量将覆盖全局变量。
局部变量:在函数中定义的变量,函数外部不可以访问。
(2)注意:在一个函数中定义了一个变量(没有使用var),在该函数被调用之前,这个变量是不存在的,这个变量会在这个函数首次调用的时候被创建,并被赋予全局作用域。
function f(){
local= 2;
}
alert(local); //local is undefined
f();
alert(local); 2
(3)函数域始终优先于全局域,所以局部变量a会覆盖与他同名的全局变量。
var a = 1;
function f(){
alert(a); // a is undefined
vara = 2;
alert(a); // 2
}
先定义了一个全局变量a,在函数f中首先打印a,但在这个函数中定义了局部变量a,覆盖了全局变量a,但这时局部变量a还没有初始化,所以第一次打印a is undefined,初始化为2以后,在打印,就可以打印出局部变量a的值2。注意,不管局部变量定义在函数的什么位置,只要定义了,在定义之前使用这个局部变量都会是undefined状态。
11,特殊函数:
(1)匿名函数:没有名字的函数。
例如:function() { return 2; }
用法:可以将匿名函数作为参数传递给其他函数。这样,接收方函数就能利用所传递的函数来完成某些事情。
可以定义某个匿名函数来执行某些一次性任务。
(2)回调函数:当将函数A传递给函数B,由B来执行A时,A就成了一个回调函数。如果A还是一个无名函数,就称之为匿名回调函数。例如:
function add(a,b){
returna()+b();
}
var one = function(){return 1;}
var two = function(){return 2;}
//可以直接使用匿名函数来代替one和two ,作为目标函数的参数。
alert(function(){return1;},function(){return 2;})
l 回调函数的优点:
l 它可以在不做命名的情况下传递函数(这意味着可以节省全局变量)。
l 可以将一个函数调用操作委托给另一个函数(这意味着可以节省一些代码编写工作)。
l 回调函数也有助于提升性能。(重要)
(3)自调函数:定义函数以后自行调用。例如:
(
function(name){
alert(“js”);
}
)(“xiaoqiang”) //传参数
第一对括号,放置的是一个匿名函数。
第二对括号,作用是立即调用上面定义的函数。
自调函数只需:将匿名函数定义放进一对括号中,然后外面在跟一对括号即可。
(4)内部函数/私有函数:
function a(param){
functionb(input){
returninput * 2;
};
return"The result is " + b(param);
}
alert(a(2)); //The result is 4
l 当调用全局函数a ( ) 时,本地函数b ( ) 也会在其内部被调用。由于b ( ) 是本地函数,它在a ( ) 以外的地方是不可见的,所以将b 称之为私有函数。
l 私有函数的优点:
l 有助于确保全局名字空间的纯净性(这意味着命名冲突的机会很小)。
l 私有性 —— 只将一些必要的函数暴露给“外面世界”,并保留属于自己的函数,使它们不为该应用程序的其他部分所用。