No 37 · html Dom

节点的层次

* Document ----最顶层的节点，所有的节点都附属于它。
* DocumentType ----DTD引用（使用< ! DOCTYOE >语法）的对象表现形式，例如：< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transtional//EN".他不能包含子节点
* DocumentFragment ----可以想Document一样保存其他子节点。
* Element      ----表示其实标签和结束标签中间的内容，这是唯一可以同时包含特性和子节点的节点类型。
* Attr----代表一对特性值和特性名，这个节点类型不能包含子节点。
* Text----文件节点，子节点不包含其他子节点。
* CDateSection ----的对象形式表现，这个节点只能包含Text节点。
* Entity----表示在DTD中的一个实体定义，例如：.这个节点不能包含子节点。
* EntityRefernce----代表一个实体的引用，例如:" ;.这个节点类型不能包含子节点。
* ProcessingInstruction ----代表一个PI。这个节点不能包含子节点。
* Comment----代表XML注释，不能有子节点。

node属性

objNode.nodeType        ---- 1=元素节点Element，2=节点属性Attr， 3=文本节点Text，9=document，8=注释的文本Comment，11 =document片段DocumentFragment
objNode.attribute       ----如果该节点是一个element，则已NamedNodeMap形式返回该元素的属性。
objNode.childNodes      ----以node[]的形式存放当前节点的子节点。如果没有子节点返回空数组。
objNode.firstChild      ----以node的形式返回当前节点的第一个子节点。如没有子节点，则为null。
objNode.lastChild       ----以node的形式返回当前节点的最后一个子节点。如没有子节点，则为null。
objNode.nextSibling     ----以node的形式返回当前节点的兄弟下一个节点。如没有这个节点，则为null。
objNode.nodeName        ----节点的名字，element节点则代表element的标记名称。
objNode.nodeValue       ----节点的值。
objNode.nodeType        ----代表节点的类型。
objNode.parentNode      ----以node的形式返回当前节点的父节点。如果没有父节点，则为null。
objNode.previousSibling ----以node的形式返回紧挨当前节点，位于它之前的兄弟节点。如没有这个节点，则为null。
objNode.hasChildNodes   ----判断此节点是否存在子节点，返回false就是没有。
objNode.ownerDocument   ----指向这个节点的所属的文档，html文件会返回document。

node方法

appendChild()   ----通过把一个节点增加到当前节点的ChildNodes[]组，给文档树增加节点。
cloneChild()    ----复制当前节点，或者复制当前节点以及它的所有子孙。
hasChildNodes() ----如果当前节点拥有子节点，则将返回true。
insertBefore() ----给文档树插入一个节点，位置在当前的节点的指定节点之前。如果该节点已经存在，则删除再插入她的位置。
removeChild(要被删除的节点)   ----从文档树中删除并返回指定的子节点。
replaceChild(被添加节点，被替换节点) ----从文档树中删除并返回指定的子节点，用另一个子节点代替他。
removeNode()    ----删除此节点

node实例

var resultshere = document.getElementById("resultshere");--得到div对象
var header = document.createElement("h4");--创建一个H4元素
resultshere.appendChild(header); --在DIV中添加一个元素
var searchedfor = document.createTextNode("You've searched for "+searchterm);--创建一个文本节点
header.appendChild(searchedfor); --在H4对象中添加一个文本节点

table.createTHead()   ----新建表格行头。
table.createTHead().insertRow(1); ----插入一个单元行。
table.createTHead().insertRow(1).insertCell(0); ----在单元行中插入一个单元格。
table.createTHead().insertRow(1).insertCell(0).appendChild(document.createTextNode('内容')) ----增加子节点和内容
]]> null http://yeyunanonline.blogcn.com/diary,114374438.shtml http://yeyunanonline.blogcn.com/diary,114374438.shtml#comment http://yeyunanonline.blogcn.com/diary,114374439.shtml 控件

1.<1.form

var objName = document.FormName;
属性:
objName.name   ----返回表单的名称，也就是<-form name="...">属性.
objName.action ----返回/设定表单的提交地址，也就是<-form action="...">属性。
objName.method ----返回/设定表单的提交方法，也就是<-form method="...">属性。
objName.target ----返回/设定表单提交后返回的窗口，也就是<-form target="...">属性。
objName.encoding ----返回/设定表单提交内容的编码方式，也就是<-form enctype="...">属性。
objName.length ----返回该表单所含元素的数目。
方法:
objName.reset() ----重置表单。这与按下“重置”按钮是一样的。
objName.submit() ----提交表单。这与按下“提交”按钮是一样的。

2.<1.Select

var ObjName = document.FormName.elements['CtrlName'];
ObjName.options[0] = new Option('请选择','0');
ObjName.options[ObjName.length] = new Option('成功','sueess');--装载控件
属性：
ObjName.name ----返回/设定用<*input name="...">指定的元素名称。
ObjName.length ----返回 Select 对象下选项的数目。
ObjName.selectedIndex ----返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。
ObjName.form ----返回包含本元素的表单对象。
<2.Option
单个Option的属性
text ----返回/指定 Option 对象所显示的文本
value ----返回/指定 Option 对象的值，与 一致。
index ----返回该 Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这个属性好像没有什么用。
selected ----返回/指定该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。
defaultSelected ----返回该对象默认是否被选中。true / false。

3.<1.Radio

var objName = document.FormName.elements['ctrlName'];
objName.name ----返回/设定用<*input name="...">指定的元素名称。
objName.value ----返回/设定用<*input value="...">指定的元素的值。
objName.form ----返回包含本元素的表单对象。
objName.checked ----返回/设定该单选域对象是否被选中。这是一个布尔值。
objName.defaultChecked ----返回/设定该对象默认是否被选中。这是一个布尔值。

4.<1.Checkbox

var objName = document.FormName.elements['ctrlName'];
objName.name ----返回/设定用<*input name="...">指定的元素名称。
objName.value ----返回/设定用<*input value="...">指定的元素的值。
objName.form ----返回包含本元素的表单对象。
objName.checked ----返回/设定该复选框对象是否被选中。这是一个布尔值。
objName.defaultChecked ----返回/设定该复选框对象默认是否被选中。这是一个布尔值。
  

5.<1.image

var ObjImage = new Image();
ObjImage.src = 'Image_Path';
ObjImage.name;----图片名称
ObjImage.lowsrc;
ObjImage.width; ----宽
ObjImage.height; ----高
ObjImage.vspace;
ObjImage.hspace;
ObjImage.border ;----边宽

images集合

a)通过集合引用
document.images             ----对应页面上的<| img |>标签
document.images.length      ----对应页面上<| img |>标签的个数
document.images[0]          ----第1个<| img |>标签          
document.images[i]          ----第i-1个<| img |>标签

b)通过nane属性直接引用
<| img name="oImage" |>
document.images.oImage      ----document.images.name属性

c)引用图片的src属性
document.images.oImage.src ----document.images.name属性.src

d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src="/1.jpg"
同时在页面上建立一个<| img |>标签与之对应就可以显示
]]> null http://yeyunanonline.blogcn.com/diary,114374439.shtml http://yeyunanonline.blogcn.com/diary,114374439.shtml#comment http://yeyunanonline.blogcn.com/diary,114374440.shtml Math数学对象

1.Math.abs(x) ----- 返回 x 的绝对值。
2.Math.acos(x)----- 返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。
3.Math.asin(x)----- 返回 x 的反正弦值。
4.Math.atan(x)----- 返回 x 的反正切值。
5.Math.atan2(x, y) ----- 返回复平面内点(x, y)对应的复数的幅角，用弧度表示，其值在 -π 到 π 之间。
6.Math.ceil(x) ----- 返回大于等于 x 的最小整数。
7.Math.cos(x) ----- 返回 x 的余弦。
8.Math.exp(x) ----- 返回 e 的 x 次幂 (ex)。
9.Math.floor(x) ----- 返回小于等于 x 的最大整数。
10.Math.log(x) ----- 返回 x 的自然对数 (ln x)。
11.Math.max(a, b) ----- 返回 a, b 中较大的数。
12.Math.min(a, b) ----- 返回 a, b 中较小的数。
13.Math.pow(n, m) ----- 返回 n 的 m 次幂 (nm)。
14.Math.random() ----- 返回大于 0 小于 1 的一个随机数。
15.Math.round(x) ----- 返回 x 四舍五入后的值。
16.Math.sin(x) ----- 返回 x 的正弦。
17.Math.sqrt(x) ----- 返回 x 的平方根。
18.Math.tan(x) ----- 返回 x 的正切。]]> null http://yeyunanonline.blogcn.com/diary,114374440.shtml http://yeyunanonline.blogcn.com/diary,114374440.shtml#comment http://yeyunanonline.blogcn.com/diary,114374441.shtml 数组

注:javascript没有定义2维数组的方法,但是可以虚拟定义,如 var objArr = new array(new array(),new array());
var objArr = new Array();
1.objArr.length; ---返回数组的长度!
2.objArr.join('连接符号'); ---把数组用连接符号连接,返回一个字符串!
3.objArr.reverse(); ---使数组中的元素顺序反过来!
4.objarr.slice(<始>,[<终>]); ---返回一个数组,该数组是原数组的子集,取值始于(始),结束于(终),如果不给出终就取到数组最后!
5.objarr.sort([方法函数]);---使数组中的元素按照一定的顺序排列,如果不指定[方法函数],则按字母顺序排列.
6.objarr.push(itme1); --方法将以新元素出现的顺序添加这些元素。如果参数之一为数组，那么该数组将作为单个元素添加到数组中。如果要合并两个或多个数组中的元素，请使用 concat 方法。
]]> null http://yeyunanonline.blogcn.com/diary,114374441.shtml http://yeyunanonline.blogcn.com/diary,114374441.shtml#comment http://yeyunanonline.blogcn.com/diary,114374442.shtml 字符串处理

var str = document.form1.text.value;
1.str.indexOf("int"); -----------不存在返回-1 存在返回0!
2.str.charAt(2); --------返回字符串中下标为2的字符，下标从0开始!
3.str.substring(2,4); ----------返回字符串中从下标2开始到下标4结束,下标一样从0开始!
4.str.substr(2,3); -----------返回字符串中从下标2开始的3个字符,下标一样从0开始!
5.str.toUpperCase(); -------------toUpperCase把小写变为大写!
6.str.toLowerCase(); ------------toLowerCase把大写变为小写!
7.str.parseInt(字符串) ----把字符处理后已整型返回!
8.str.parseFloat(字符串) ----把字符串处理后已浮点型返回!
9.str.split() ---<字符串对象>.split(<分隔符字符>)；返回一个数组，该数组是从<字符串对象>中分离开来的，<分隔符字符>决定了分离
的地方，它本身不会包含在所返回的数组中。例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。
10.str.charCodeAt() ------<字符串对象>.charCodeAt(<位置>)；返回该字符串位于第<位置>位的单个字符的 ASCII 码。
11.str.fromCharCode() ------String.fromCharCode(a, b, c...)；返回一个字符串，该字符串每个字符的 ASCII 码由 a, b, c... 等来确定。
12.str.search(/p/); ----返回字段串所在的位置
13.str.concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。
14.str.match(正则表达式) – 检查一个字符串是否匹配一个正则表达式。
15.str.slice() – 提取字符串的一部分，并返回一个新字符串。
16.str.replace(参数1，参数2)； -----字符串替换，参数1，被替换值，可以为正则也可以为随便任意字符，参数2是要替换的字符
]]> null http://yeyunanonline.blogcn.com/diary,114374442.shtml http://yeyunanonline.blogcn.com/diary,114374442.shtml#comment http://yeyunanonline.blogcn.com/diary,114374443.shtml 基本语法

window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,lacation=no,status=no');
"page.html" 弹出窗口的文件名,这有时候写绝对路径,height=100 窗口高度；,width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏；
yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
window.close();   ----- 关闭窗口
window.setTimeout("self.close()",10000); ----在10秒中后执行self.close();
window.createPopup()   -----创建弹出窗口。  

window属性

window.status(); ---- 窗口状态栏
window.opener(); ---- 返回打开本窗口的对象
window.name();   ---- 设置或获取表明窗口名称的值。
方法：objName = document.formName.ctrName;
    objName.parentElement   --假如objName对象所在的位置是TD那么objName.parentElement将是他的上一级标签tr

window对象

window.document ---- 代表给定浏览器窗口中的 HTML 文档。
window.event     ---- 代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。
window.external ---- 允许访问由 Microsoft® Internet Explorer 浏览器组件宿主应用程序提供的附加对象模型。
window.history   ---- 包含了用户已浏览的 URL 的信息。
window.location ---- 包含关于当前 URL 的信息。
window.navigator ---- 包含关于 Web 浏览器的信息。
window.screen    ---- 包含关于客户屏幕和渲染能力的信息。