DOM（JavaScript高程笔记）

时间：2023-03-09 19:48:48
DOM（JavaScript高程笔记）

一、节点层次

1.Node类型

if (someNode.nodeType == 1){  // 适用于所有浏览器

    alert("Node is an element.");

}
  • Node.ELEMENT_NODE (1)；
  • Node.ATTRIBUTE_NODE (2)；
  • Node.TEXT_NODE (3)；

nodeName 和 nodeValue 属性

在使用这两个值以前，最好是像下面这样先检测一下节点的类型。

if (someNode.nodeType == 1){

    value = someNode.nodeName; // nodeName 的值是元素的标签名

    // 对于元素节点，nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null 。

}

节点关系

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。

NodeList 是一种类数组对象，它实际上是基于 DOM 结构动态执行查询的结果。

// 转为数组

function convertToArray(nodes){

    var array = null;

    try {

        array = Array.prototype.slice.call(nodes, 0);

    } catch (ex) {

        //  IE8 及更早版本将 NodeList实现为一个 COM 对象

        array = new Array();

        for (var i=0, len=nodes.length; i < len; i++){

            array.push(nodes[i]);

        }

    }

    return array;

}

convertToArray(someNode.childNodes);
  • childNodes
  • parentNode
  • previousSibling
  • nextSibling
  • firstChild
  • lastChild
  • hasChildNode() // 在节点包含一或多个子节点的情况下返回 true
  • ownerDocument // 所有节点都有的属性，指向整个文档节点

操作节点

  • appendChild() // 如果节点已经是文档的一部分，则将该节点从原来的位置

    转移到末尾
  • insertBefore() // 如果参照节点是

    null ，则 insertBefore() 与 appendChild() 执行相同的操作
  • replaceChild()
  • removeChild()
  • cloneNode() // IE会复制JavaScript事件，最好先移除事件
  • normalize() // 处理文本节点，空则删，相邻则合并

3.Document类型

  • nodeType = 9
  • nodeName = '#document'
  • nodeValue = null
  • parentNode = null
  • ownerDocument = null

其子节点可能是一个 DocumentType （最多一个） 、 Element （最多一个） 、 ProcessingInstruction

或 Comment 。

文档的子节点

  • documentElement // 指向<html>
  • childNodes[0] // 指向<html>
  • body // 指向<body>
  • doctype // 指向<!DOCTYPE>，各浏览器支持不一致

文档信息

  • title // 中的文本
  • URL
  • referrer // 来源页面
  • domain

1 不能将这个属性设置为 URL 中不包含的域

// 假设页面来自 p2p.wrox.com 域

document.domain = "wrox.com"; // 成功

document.domain = "nczonline.net"; // 出错！

2 如果域名一开始是“松散的” （loose） ，那么不能将它再设

置为“紧绷的” （tight） 。

// 假设页面来自于 p2p.wrox.com 域

document.domain = "wrox.com"; //松散的（成功）

document.domain = "p2p.wrox.com"; //紧绷的（出错！）

3 设置为相同的值可用于 frame 跨域

查找元素

  • getElementById()
  • getElementsByTagName() // 返回 HTMLCollection 对象
  • getElementsByName() // 返回 HTMLCollection 对象

特殊集合 // 返回值与 HTMLCollection 对象类似

  • anchors // 所有带 name 属性的
  • links // 所有带 href 属性的
  • forms // 所有
  • images // 所有DOM（JavaScript高程笔记）

HTMLCollection对象

  • namedItem() // 通过元素的 name 属性取得集合中的项（只会取得第一项）
  • 我们可以向方括号中传入数值或字符串形式的索引值。在后台，对数

    值索引就会调用 item() ，而对字符串索引就会调用 namedItem() 。

DOM一致性检测

document.implementation.hasFeature('name', 'verson');

文档写入

// 直接写入文档末尾

document.write("<strong>" + (new Date()).toString() + "</strong>");

// 如果在文档加载结束后再调用 document.write() ，那么输出的内容将会重写整个页面

window.onload = function(){

    document.write("Hello world!");

};
  • write() // 原样写入
  • writeIn() // 末尾添加换行符(\n)
  • open()
  • close() // 打开、关闭输出流，如页面加载期间用 write 和 writeIn 则无需打开关闭

3.Element类型

  • nodeType = 1
  • nodeName = tagName = 标签名
  • nodeValue = null

取得属性

  • getAttribute() // 可取得 data- 自定义属性。
  • 可以通过 DOM 对象的属性来取得非自定义属性。
  • IE 可以通过 DOM 对象属性取得自定义属性。

1 style

  • getAttribute() 访问返回CSS文本
  • DOM 对象属性访问返回对象

2 事件(onclick)

  • getAttribute() 访问返回字符串
  • DOM 对象属性访问返回函数

设置属性

  • setAttribute() // 可设置 data- 自定义属性
  • 可以通过 DOM 对象的属性来设置非自定义属性。
  • IE 可以通过 DOM 对象属性设置自定义属性。

删除属性

  • removeAttribute() // 彻底删除，包括属性和值

attributes属性

attributes 属性中每一个元素属性都由一个 Attr 节点表示，保存在一个 NamedNodeMap 对象中 ，NamedNodeMap 与 NodeList 类似。

节点属性

  • nodeName
  • nodeValue

遍历元素属性

function outputAttributes(element){

    var pairs = new Array(),

    attrName,

    attrValue,

    i,

    len;

    for (i=0, len=element.attributes.length; i < len; i++){

        attrName = element.attributes[i].nodeName;

        attrValue = element.attributes[i].nodeValue;

        if (element.attribute[i].specified) {

            pairs.push(attrName + "=\"" + attrValue + "\"");

        }

    }

    return pairs.join(" ");

}

创建元素

var div = document.createElement("div");

// 在 IE 中可用以下方式

var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");

相关文章