Javascript DOM

(一) 基础

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 代表一个实体引用,例如&quot;。这个节点类型不能包含子节点
    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, nullfalse);
        
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的效果

<div id="div1" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'">

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">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Style Example</title>
        <script type="text/ecmascript">
            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">

            <span style="font-weight:bold">
                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">

<html xmlns="http://www.w3.org/1999/xhtml">
    
<head>
        
<title>Toggle Example</title>
        
<script type="text/ecmascript">
            
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>
        
        
<p>&nbsp;</p>
        
        
<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]来获得选项。

 

阅读更多
换一批

没有更多推荐了,返回首页