美文网首页
DOM API 类型

DOM API 类型

作者: tazbingor | 来源:发表于2017-09-21 10:07 被阅读0次

粗略的过一遍DOM API

DOM类型

Node 表示所有类型值的统一接口, IE不支持
Document 表示文档类型
Element 表示元素节点类型
Text 表示文本节点类型
Comment 表示文档中的注释类型
CDATASection 表示 CDATA区域类型
DocumentType 表示文档声明类型
DocumentFragment 表示文档片段类型
Attr 表示属性节点类型

Node类型

Node接口是 DOM1级就定义了, Node接口定义了 12个数值常量以表示每个节点的类型值。

ELEMENT_NODE 元素 1
ATTRIBUTE_NODE 属性 2
TEXT_NODE 文本 3
CDATA_SECTION_NODE CDATA 4
ENTITY_REFERENCE_NODE 实体参考 5
ENTITY_NODE 实体 6
PROCESSING_INSTRUCETION_NODE 处理指令 7
COMMENT_NODE 注释 8
DOCUMENT_NODE 文档根 9
DOCUMENT_TYPE_NODE doctype 10
DOCUMENT_FRAGMENT_NODE 文档片段 11
NOTATION_NODE 符号 12

ps:Node接口在非标准的浏览器(ie8之下)下不能正常的运行。

为了兼容性,索性把这十二个类型值都枚举出来

if (typeof Node == 'undefined') {
     window.Node = {
       ELEMENT_NODE: 1,
       ATTRIBUTE_NODE: 2,
       CDATA_SECTION_NODE: 4,
       ENTITY_REFERENCE_NODE: 5,
       ENTITY_NODE: 6,
       PROCESSING_INSTRUCETION_NODE: 7,
       COMMENT_NODE: 8,
       DOCUMENT_NODE: 9,
       DOCUMENT_TYPE_NODE: 10,
       DOCUMENT_FRAGMENT_NODE: 11,
       NOTATION_NODE: 12
     };
}

Document类型

文档根节点

window.onload = function () {
    console.log(document);              //#document
    console.log(document.nodeType);     //9
    console.log(document.nodeValue);    //null
    console.log(document.nodeName);     //#document
    console.log(document.childNodes[0]);     //<!DOCTYPE html> ,IE理解为注释
};

Document属性

document.title; 获取和设置<title>标签的值
document.URL; 获取 URL路径
document.domain; 获取域名,服务器端
document.referrer; 获取上一个 URL,服务器

Document对象集合

document.anchors; 获取文档中带name属性的<a>元素集合
document.links; 获取文档中带 href属性的<a>元素集合
document.applets; 获取文档中<applet>元素集合,已不用
document.forms; 获取文档中<form>元素集合
document.images; 获取文档中<img>元素集合

Element类型

HTML HTMLHtmlElement
DIV HTMLDivElement
BODY HTMLBodyElement

ps:以此类推,直接访问即可获得更多的元素对应类型

Text类型

text类型用于表现文本节点类型,不包含HTML,或包含转义后的HTML.文本节点的nodeType为3.

text操作DOM的方法

var box = document.getElementById('box');
box.firstChild.deleteData(0,2);                     //删除从 0位置的 2个字符
box.firstChild.insertData(0,'Hello.');              //从 0位置添加指定字符
box.firstChild.replaceData(0,2,'Miss');             //从 0位置替换掉 2个指定字符
box.firstChild.substringData(0,2);                  //从 0位置获取 2个字符,直接输出
alert(box.firstChild.nodeValue); 

text节点合并

box.normalize(); //合并成一个节点

text节点分离

box.firstChild.splitText(3); //分离一个节

Comment类型

Comment类型表示文档中的注释,nodeType是 8 ,nodeName是#comment,nodeValue是注释的内容。

var box = document.getElementById('box');
alert(box.firstChild); //Comment

ps:在 IE中,注释节点可以使用,当作元素来访问.

var comment = document.getElementsByTagName('!');
alert(comment.length);

Attr类型

表示文档元素中的属性

attr.isId 如果属性是 id 类型,则返回 true,否则返回 false。
attr.name 返回属性的名称。
attr.value 设置或返回属性的值。
attr.specified 如果已指定属性,则返回 true,否则返回 false。
nodemap.getNamedItem() 从 NamedNodeMap 返回指定的属性节点。
nodemap.item() 返回 NamedNodeMap 中位于指定下标的节点。
nodemap.length 返回 NamedNodeMap 中的节点数。
nodemap.removeNamedItem() 移除指定的属性节点。
nodemap.setNamedItem() 设置指定的属性节点(通过名称)。

PS:在DOM Core 1、2和3中,Attr继承自Node。在DOM4有所改变。为了规范化Attr的实现,它将不再继承自Node

今后实践中再详细描述DOM API的的各种特点~

欢迎勘误

-END-

相关文章

  • DOM API 类型

    粗略的过一遍DOM API DOM类型 Node类型 Node接口是 DOM1级就定义了, Node接口定义了 1...

  • 「DOM 编程」文档树

    文档树HTML 转换 DOM 树节点遍历节点类型元素遍历 DOM 编程就是使用 W3C 定义的 API (Appl...

  • DOM内容

    就是把文档,变成对象的东西。就是dom页面中的节点==(构造函数DOM API)==>构造出对应的对象 节点类型常...

  • 十至十二章导读题

    10.1 什么是DOM?DOM是针对HTML和XML文档的一个API; 10.2在确定节点类型时,如何确保兼容性?...

  • DOM相关

    DOM(文档对象模型是针对HTML和XML文档的一个API) 节点层次 1.node类型 (1)DOM1级定义了一...

  • Javascript操作DOM常用API总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,...

  • DOM常用API简述

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,...

  • js操作DOM常用API

    文本整理了javascript操作DOM的一些常用API,根据其作用整理成为创建,修改,查询等多种类型的API,主...

  • javascript-DOM基础

    理解1.包含不同层次节点的dom,使用不同的节点类型dom(文档对象模型)是针对html和xml文档的一个api,...

  • 【DOM】DOM的操作(增删改查)

    操作DOM的核心就是增删改查 参考: JavaScript DOM编程——API详解 目录 一、节点创建型API ...

网友评论

      本文标题:DOM API 类型

      本文链接:https://www.haomeiwen.com/subject/hxkzsxtx.html