欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

DOM （JavaScript学习笔记）

程序员文章站 2024-03-20 09:15:28
...

DOM是针对HTML和XML文档的一个API（应用程序接口）。

IE中所有DOM对象都是以COM对象的形式实现的，所以IE中的DOM对象与原生JavaScript对象的行为或活动特点不一致，这个要注意。

1.节点层次

文档节点是每个文档的根节点.<html>元素是根节点的子节点，称为文档元素。文档元素是文档的最外层元素。每个文档只能有一个文档元素。

1.1Node类型

　　NODE.ELEMENT_NODE(1)

　　NODE.ATTRIBUTE_NODE(2)

　　NODE.TEXT_NODE(3)

　　NODE.COMMENT_NODE(8)

　　NODE.DOCUMENT_NODE(9)

　　NODE.DOCUMENT_TYPE_NODE(10)

　　NODE.DOCUMENT_FRAGMENT_NODE(11)

(someNode.nodeType==1)用这种方式判断元素的类型，不要用someNode.nodeType == NODE.ELEMENT_NODE,因为IE浏览器不支持

（1）nodeName和nodeValue

如果是元素节点，nodeName为标签名，nodeValue为null

（2）节点关系

childNodes属性

每个节点都有一个childNodes属性，其中保存着一个NodeList对象，是基于DOM结构动态执行查询的结果。访问NodeList中的元素，可以用[序号]或者用someNode.childNodes.item(序号)两种方法。

NodeList是类数组对象，可以转换成数组：

var nodeArray=Array.prototype.slice.call(someNode.childNodes,0);

(在IE中，需要手动枚举所有成员)

parentNode属性

nextSibling属性

previousSibling属性

firstChild属性

lastChild属性

hasChildNodes（）方法：在节点包含一个或者多个子元素的时候会返回true

ownerDocument属性：指向表示整个文档的文档节点

（3）操作节点

appendChild(newNode)方法：向childNodes列表的末尾添加一个节点。若是传入的node在childNodes列表中有，会将这个node从原来的位置移动到最后。返回值为newNode

insertBefore（newNode，refNode）方法：在参考node前插入新的node，若参考节点为null则和appendChild（）方法一样。返回值是newNode

replaceChild(插入节点，被替换节点)方法：删除被替换节点，插入节点占据其位置。返回值是被替换节点。即被替换节点仍在文档中，不过没有了自己的位置~~~

removeChild（被删除的节点）方法：返回被删除的节点，也是依然在文档中，但是没有了自己的位置

这四个方法都要取得父元素

（4）其它方法

someNode.cloneNode():参数为true，拷贝元素和子元素；false 拷贝元素本身

someNode.normalize():删除空的文本节点，合并两个相邻的文本节点

 1.2 Document类型

浏览器中document是HTMLDocument的一个实例，表示整个页面

nodeType=9 nodeName="#document“ nodeValue=null parentNode=null ownerDocument=null

1.2.1文档的子节点

document.documentElement指向<html>

document.body指向<body>

1.2.2文档信息

document.title 指向<title>可以修改document.title更改浏览器显示标题，会更改title元素

document.url 页面完整的url（地址栏中的）只读

document.domain 页面域名 可以修改（但是有限制），可以从紧到松，反之不可

document.referrer 打开这个页面之前的页面，若没有则为空

1.2.3 查找元素

document.getElementByID()

IE7及更低的版本，会范围name为输入id值得表单元素

document.getElementsByTagName()

返回一个HTMLcollection，与NodeList类似，有item（）方法，也可以直接[index].还有一个.nameItem()方法，根据元素的name特性来选择某个元素，也可以用.["name(name特性值)"]来选择元素

document.getElementByName()

返回一个HTMLCollection，返回有这个name的所有元素，例如单选。.nameItem()返回第一个元素

1.2.4特殊集合

1.2.5DOM一致性检测

document.implementation属性有一个.hasFeature()方法，输入要检测的DOM功能的名称和版本号，如果支持返回true，不支持返回false。但是返回true不一定就和规范的要求一致，最好再加上能力检测

1.2.6文档写入

document.write() 参数字符串，原样写入

document.writeIn() 参数字符串，最后会加上一个换行符（\n）

用这两种方法可以动态的向页面添加内容和动态的包含外部资源（注意转义\/）。若文档加载结束后调用这两个方法则会重写整个页面

document.open()

document.close()

1.3 Element类型

nodeType=1

nodeName=tagName

nodeValue=null

parentNode=document或element

1.3.1HTML元素

所有HTML元素都由HTMLElment类型表示，不是直接通过这个类型，也是通过它的子类。HTMLElement直接继承自ELEMENT并且添加了一些属性

element.id element.className element.lang elemeng.dir element.title

1.3.2取得特性

element.getAttribute（）

元素有的特性都可以通过元素的属性的方式来访问，自定义特性不可以

但是style通过属性的方式访问，返回一个对象，通过getAttribute方式访问，返回一个字符串；onclick这种事件，如果用属性访问，返回一个函数，用getAttribute访问返回字符串

1.3.3设置特性

element.setAttribute()

接受特性名和特性值两个参数，也可以定义自定义特性。注意自定义的元素的属性不会转成特性

element.removeAttribute（）

删除某个特性

1.3.4 Attributes属性

attributes属性中包含一个NamedNodeMap，与NodeList相似。元素的每一个特性都由一个特性节点表示，保存在NamedNodeMap中。

NamedNodeMap对象有以下方法：

.getNamedItem(name)

.removeNamedItem(name)

.setNamedItem(node)

.item(pos)

如果想遍历元素的特性，可以用attributes属性。

特性节点有个specified属性，如果这个值是true，意味着在HTML或者用setAttribute（）方法设置了该属性，即不是默认值。

1.3.5创建元素

document.createElement()

可以是标签名，也可以是完整的HTML标签

1.3.6元素的子节点

childNodes

空白节点是否会成为子节点，可以通过判断子节点的类型来判断

element.getElementsByTagName();

1.4Text类型

nodeType=3 nodeValue=文本内容 nodeName=”#text“ parentNode=Element childNode没有

Text节点的内容可以通过nodeValue或者data得到

.appendData(text)

.deleteData(offset,count)

.insertData(offset,text)

.replaceData(offset,count,text)

.splitData(offset)

.subStringData(offset,count)

1.4.1创建文本节点

document.createTextNode()

1.4.2规范化文本节点

Node类型定义的，所有的节点都有这个方法Normalize（）删除多余空白文字节点，合并两个相邻文字节点

1.4.2分割文本节点

textNode.splitText(offset)返回后面一段的文本节点

1.5其他节点

Comment类型

nodeType=8 nodeName=“#comment” nodeValue=注释的内容 parentNode=document或element 没有childNode，新建方法document.createComment()

DocumentFragment类型

nodeType=11 nodeName="#document-fragment" nodeValue=null parentNode=null 创建方法document.createDocumentFragment()

Attr类型

nodeType=2 nodeName=特性的名称 nodeValue=特性的值 parentNode=null 没有子节点

有三个属性.name .value .specified 新建方法document.createAttribute()

 

2.DOM操作技术

2.1 动态脚本

动态引入外部文件脚本

function loadScript(url) {
    var script = document.createElement('script');
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

动态在文件内部插入脚本

function loadScriptString(code) {
    var script = document.createElement('script');
    script.type="text/javascript";
    try{
        script.appendChild(document.createTextNode(code));
    }
    catch (ex){
        script.text=code;
    }
    document.body.appendChild(script);
}

2.2动态样式

动态引入外部文件样式

function loadStyles(url) {
    var link = document.createElement('link');
    link.rel="stylesheet";
    link.href=url;
    link.type='text/css';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(link);
}

动态在文件内部添加样式

function loadStyleString(code) {
    var style = document.createElement('style');
    style.type='text/css';
    try{
        style.appendChild(document.createTextNode(code));
    }
    catch (ex){
        style.stylesheet.cssText=code;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}

之所以有try catch是因为ie浏览器中将<script>和<style>认定为特殊的元素，不可以访问其子节点

 

上一篇： 存储过程的创建和使用

下一篇： 二分查找思想及代码

推荐阅读