03 浏览器对象与DOM.pptVIP

* * * * * * * * * * 元素节点 元素节点 属性处理有关的方法： getAttribute(name) 返回名为 name 的属性值 removeAttribute(name) 删除名为 name 的属性 setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value getAttributeNode(name) 返回名为 name 的属性节点 removeAttributeNode(node) 删除与指定节点匹配的属性节点 查找嵌套元素有关的方法： getElementsByTagName(elementName) 返回具有指定名称的元素节点列表 元素节点 //创建img元素 var imgElement = document.createElement(img); //设置src属性 imgElement.setAttribute(src, “dog.jpg); //设置width属性 imgElement.setAttribute(width, 130); //设置height属性 imgElement.setAttribute(height, 150); //将元素添加到body中 bodyElement.appendChild(imgElement); 方法示例： 文本节点 文本节点 用于增加或分解节点中的数据的方法： appendData(text) 将提供的文本追加到文本节点的已有内容之后。 insertData(position, text) 允许在文本节点的中间插入数据。在指定的位置插入 提供的文本 replaceData(position, length, text) 从指定位置开始删除指定长度的字符，用提供的文本 代替删除的文本 var pElements = bodyElement.getElementsByTagName(p); for (i=0; ipElements.length; i++) { var pElement = pElements.item(i); var text = pElement.firstChild.nodeValue; alert(text); } 一般使用 nodeValue 属性来访问文本节点的文本 节点类型 常量 值 ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESSING_INSTRCTION_NODE 7 COMMENT_NODE? 8 DOCUMENT_NODE 9 DOCUMENT_TYPE_NODE 10 DOCUMENT_FRAGMENT_NODE 11 NOTATION_NODE?? 12 注意:IE6.0不支持 通过节点的nodeType属性来检验节点类型 节点类型 var someNode = document.documentElement.firstChild; if (someNode.nodeType == Node.ELEMENT_NODE) { alert(Weve found an element node named + someNode.nodeName); } else if (someNode.nodeType == Node.TEXT_NODE) { alert(Its a text node; the text is + someNode.nodeValue); } else if (someNode.nodeType == Node.ATTRIBUTE_NODE) { alert(Its an attribute named + someNode.nodeName + with a value of + someNode.nodeValue + ); } 通过节点的nodeType属性来检验节点类型 总结 JavaScript 程序是事件驱动程序 onFocus获得焦点事件，表示获得鼠标光标， onBlur失去焦点事件，刚好与之相反 浏览器对象是一个分层次的结构，window是顶层的根对象 打开窗口使用window对象的open( )方法 设置定时器，使用window对象的setTimeout( )方法 location对象的back( )和forward( )方法等同于前进、后退按钮 DOM的通用节点属性 DOM的通用节点方法 MOM的元素