Javascript DOM

来源：互联网发布：响应式源码编辑：程序博客网时间：2024/05/01 04:32

(一) 基础

1.现在的XHTML都是符合XML规范的，XML里面<?   ?>包含的内容称为处理指令（processing instruction),它主要给XML解析器一些额外的信息，来告诉解析

器如何处理XML数据，例如所有的XML文件开头都有
    <?xml version="1.0"?>
也可以指定XML文件的样式表
    <?xml-stylesheet type="text/css"?>
2. DOM 节点的类型
   Document 最顶层节点，所有的其它节点都是附属于它的。
   DocumentType   DTD引用（使用<!DOCTYPE>语法）的对象表示形式，例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.

它不能包含子节点。
   DocumentFragment 可以象Document一样保存其它节点。
   Element 一对标签的内容。
   Attr 标签里面的属性名称和属性值
   Text 标签之间的文本或者CDataSection里面的文本
   CDataSection <![CDATA[ ]]>的对象表现形式
   Entity   表示DTD中的一个实体定义，例如<!ENTITY foo "foo">。这个节点类型不能包含子节点
   EntityReference 代表一个实体引用，例如"。这个节点类型不能包含子节点
   ProcessingInstruction 代表一个处理指令，例如：<?xml-stylesheet type="text/css"?>
   Comment XML注释，不能包含子节点
   Notation 代表在DTD中定义的记号，很少用。

3. DOM操作函数
       a. 对属性的操作， getAttribute(),setAttribute(),removeAttribute(), 或者attributes.getNamedItem(), attributes.setNamedItem(),

attributes.removeNamedItem()
   b. 对子节点的访问，
       getElementsByTagName(), 可以传入"*"来获得所有的节点，但是这个结果和document.all是等价的
       getElementsByName()， IE6和Opera7.5在这个方法上有些错误，它们还会返回id等于传入参数的Element，而且它们只检查<input/><img/>

元素
       getElementById() id是唯一的，所以返回值最多只有一个Element，IE6对于这个方法有一个bug，如果传入参数匹配某个元素的name，它也

会返回这个元素
   c. 创建和操作节点
       createAttributge
       createCDATASection
       createComment
       createDocumentFragment
       createElement
       createEntity
       createProcessingInstruction
       createTextNode
   d. 增加节点常用方法：createElement(),createTextNode(),appendChild(),使用这些方法的时候要注意，有些Element是不可以appendChild的。
   e. 删除节点常用方法：removeChild(), replaceChild(), insertBefore()
   f. 如果操作的次数比较多，会导致多次刷新，这个时候可以使用createDocumentFragment()函数创建document片段，整理好了，一次性的添加到document里面

(二) HTML DOM

a. <img src="mypicture.jpg" border="0"/>,如果要改属性可以通过getAttribute()或者setAttribute(),也可以直接写为 var nodeImg = document.getElementByID(); nodeImg.src = ""; nodeImg.border = "1";因为class是ECMAScript的关键字，所以对于class属性，我们调用nodeImg.className = "".注意：IE在setAttribute()上有个很大的问题，无法及时刷新。

b. HTML DOM 对table的操作有一套专门的API
       caption        指向<caption/>元素（如果存在）
       tBodies           指向<tbody/>元素（如果存在）
       tFoot           指向<tfoot/>元素（如果存在）
       tHead           指向<thead/>元素（如果存在）
       rows
       createTHead()
       createTFoot()
       createCaption()
       deleteTHead()
       deleteTFoot()
       deleteCaption()
       deleteRow(position)
       insertRow(position)
       <tbody/>元素添加了以下内容：
           rows
           deleteRow(position)
           insertRow(position)
           <tr/>元素添加了以下内容：
               cells
               deleteCell(position)
               insertCell(position)

c. NodeIterator用来遍历对象

       这个对象的构造函数有四个参数：
       root :        从树中开始搜索的那个节点
       whatToShow :    一个数值代码，代表一个枚举，后面详细介绍
       filter：   自定义的NodeFilter对象，决定需要忽略哪些节点
       entityReferenceExpansion : bool值，表示是否需要扩展实体引用

       通过下面一个或者多个常量的与或操作，可以设置whatToShow的值：
       NodeFilter.SHOW_ALL
       NodeFilter.SHOW_ELEMENT
       NodeFilter.SHOW_ATTRIBUTE
       NodeFilter.SHOW_TEXT
       NodeFilter.SHOW_CDATA_SECTION
       NodeFilter.SHOW_ENTITY_REFERENCE
       NodeFilter.SHOW_ENTITY
       NodeFilter.SHOW_PROCESSING_INSTRUCTION
       NodeFilter.SHOW_COMMENT
       NodeFilter.SHOW_DOCUMENT
       NodeFilter.SHOW_DOCUMENT_TYPE
       NodeFilter.SHOW_DOCUMENT_FRAGMENT
       NodeFilter.SHOW_NOTATION

       方法：

// 不使用自定义NodeFilter参数，可以传入null

var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, null, false);

var node1 = iterator.nextNode();

var node2 = iterator.nextNode();

var node3 = iterator.previousNode();

alert(node1 == node3); // output "true"

// 扩展NodeFilter对象，该对象只有一个方法acceptNode()

var myNodeFilter =

{

acceptNode : function(oNode)

{

return (oNode.tagName == "p") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;

}

或者

var myNodeFilter = new Object();

myNodeFilter.acceptNode = function(oNode)

{

return (oNode.tagName == "p") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;

}

// 使用自定义NodeFilter对象：

var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, myNodeFilter, false);

// 如果使用NodeIterator遍历，如果使用自定义的NodeFilter，忽略掉一个节点，它也就不遍历该节点的子节点了，

// 所以子节点也会被忽略，如果不想忽略，就要使用下面的TreeWalker

d. TreeWalker有点像NodeIterator的大哥：它有NodeIterator所有的功能（nextNode()和previousNode()），并且添加了一些遍历方法：
    parentNode()----进入当前节点的父节点
    firstChild()----进入当前节点的第一个子节点
    lastChild()----进入当前节点的最后一个子节点
    nextSibling()----进入当前节点的下一个兄弟节点
    previousSibling()----进入当前节点的前一个兄弟节点
    可以通过document.createTreeWalker()来创建TreeWalker

(三)CSS DOM 编程

1. IE4.0为每一个Web页面元素引入了一个style对象来管理元素的css样式，最后被DOM沿用至今
2. 改变border line的代码

var oDiv = document.getElementById("div1");

oDiv.style.border = "1px solid black";

3. 通过下面的代码，可以实现hover的效果

4. style对象有一些方法,这些是DOM标准里面有的，但是IE不支持，所以最好还是直接使用style的属性,如：style.backgroundColor的形式来设置style的property值比较好。
    style.getPropertyValue(propertyName);
    style.getPropertyPriority();
    style.item(index);
    style.removeProperty(propertyName);
    style.setProperty(propertyName, value, privority);
5. Copy下面的内容到txt文件，然后改后缀为.htm，用IE打开，可以看到一个黄色的Tip，主要原理是操作style.Visibility属性，这个属性和style.display是不一样的，前者只是控制visible，不会影响布局，后者不仅仅控制visible，还会影响布局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Style Example</title>

function showTip(oEvent)

{

var oDiv = document.getElementById("divTip1");

oDiv.style.visibility = "visible";

oDiv.style.left = oEvent.clientX + 5;

oDiv.style.top = oEvent.clientY + 5;

}

function hideTip(oEvent)

{

var oDiv = document.getElementById("divTip1");

oDiv.style.visibility = "hidden";

}

</script>

</head>

<body>

<p>

Move your mouse over the red square.

</p>

<div

id="div1"

style="background-color: red; height: 50px; width:50px"

onmouseover="showTip(window.event)" onmouseout="hideTip(window.event)">

</div>

<div

id="divTip1"

style="background-color: Yellow; position:absolute;visibility:hidden;padding:5px">

Custom Tooltip

</span>

<br/>

More details can go here.

</div>

</body>

</html>

6. 下面代码利用style的display属性控制折叠功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Toggle Example</title>

function toggle(sDivId)

{

var oDiv = document.getElementById(sDivId);

oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";

}

</script>

</head>

<body>

<div

style=" background-color:Blue; color:white;font-weight:bold;padding:10px;cursor:pointer"

onclick="toggle('divContent1')">

Click here.

</div>

<div

id="divContent1"

style="border:3px solid blue; height:100px; padding:10px">

This is some content to show and hide.

</div>

<div

style="background-color:Blue; color:White; font-weight:bold; padding:10px; cursor:pointer"

onclick="toggle('divContent2')">

Click here

</div>

<div

id="divContent2"

style="border: 3px solid blue; height:10px; padding:10px">

This is some content to show and hide.

</div>

</body>

</html>

6. 有些元素通过设置class属性来设置样式，我们可以通过document.styleSheets集合拿到当前文档所有的css class。如果修改css class的设置，将影响所有的使用这个css class的元素。
DOM中可以使用document.styleSheets[0].cssRulers ,但是IE中对应的属性叫document.styleSheets[0].rulers
7. 我们可以为一个element设置style，也可以给它的父Element设置style，还可以设置css class，最后我们在浏览器看到的效果是所有这些设置的合并，IE提供或者最后看到的style的属性是element.currentStyle，它是只读的。DOM提供的是一个方法,可以通过document.defaultView.getComputedStyle(element, hover)获得，第一个参数是元素，第二个参数是伪类：:hover,:first-letter.

(四) 表单(Form)操作

1. 创建表单元素是为了满足用户向服务器发送数据的要求，Web表单使用的Html元素有<form/>,<input/>,<select/>,<textarea/>等
2. <form/>用来向服务器传输数据，它的属性有：
    method   表示浏览器发送GET请求或是发送POST请求。
    action      表示表单所要提交到的地址URL。
    enctype   当向服务器提交数据时，数据应该使用的编码方法，默认是application/x-www-url-encoded,不过，如果要上传文件，可以设置multipart/form-data
    accept    当上传文件时候，列出服务器能正确处理的mime类型。
    accept-charset   当提交数据时，列出服务器接受的字符编码。

3. <input/>元素是Html的主要输入元素。通过type特性来判断是哪种输入控件：
    “text"
    "radio"
    "checkbox"
    "file"
    "password"
    "button"
    "submit"
    "reset"
    "hidden"
    "image"

4. 获取Form使用document.getElementById()或者document.forms["formId"], document.forms[0].

5. 获取Form上的输入字段oForm.elements[0], oForm.elements["textbox1"], oForm.textbox1, oForm["textbox1"]

6. Form 上的方法：form.submit(), form.reset()

7. <input/>有一些属性：
    <input type="text" validchars = ”0123456789“/>
    <input type="text" invalidchars = ”0123456789“/>
    控制input可以输入的字符，除了设置上面的属性，还要考虑用户paste，
    在IE里面，可以直接<input text="text" onpaste="return false"/>
    对于其它的浏览器，需要组织菜单paste和Ctrl + V来paste
    <input type="text" invalidchars="0123456789" onpaste="return false" oncontextmenu="return false"
       onkeypress="return blcokchars(this, event, true)/>

function blockChars(oTextbox, oEvent, bBlockPaste)

{

var sInvalidChars = oTextbox.getAttribute("invalidchars");

var sChar = String.fromCharCode(oEvent.charCode);

var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;

if (bBlockPaste)

{

return bIsValidChar && !(oEvent.ctrlKey && sChar == "v");

}

else

{

return bIsValidChar || oEvent.ctrlKey;

}

8. 对于<select/>,我们使用oListbox.options[0]来获得选项。