美文网首页
节点的类型与区分

节点的类型与区分

作者: hyperRect | 来源:发表于2017-05-30 05:33 被阅读0次

DOM 由 NODE构成, node包含以下12种类型。

最常见的几种

Element Type: 元素节点, nodeType =1. html或xml元素。

Element 的parentNode 可以是 Document 和 Element. 

NodeValue = null.

NodeType 为当前element的 html tag名

ChildNodes 子节点可以是Element, Text, Comment, ProcessingInstruction, CDATASection 或 EntityReference.(注意没有attribute node)

常用操作方法:

创建attribute: 

document.createAttribute("attr1");

attr1.value = "anything"

element.setAttribute(attr1);

操作attribute : GetAttribute, SetAttribute. 少用 element.attr1 = "anything" 这种方式 因为不一定支持。

以及IE6低版本不支持的 removeAttribute("class")

遍历attribute: element.attributes , 支持索引器。 attributes["id"], attributes.item(number)可以返回位于number位置的attribute属性。

创建元素: document.createElement("tagtype") . tagtype指的是html的tag 名。不区分大小写。 xhtml/xml中区分。

在内存中创建后需要用element.appendChild()方法去添加进来。

注意创建元素时 IE7及更早版本需要特殊对待。


另:子节点的问题

例: <div>

                <h1>hi </h1>

        </div>

IE 忽略空text type node

其他浏览器 良好的结构 会产生空格 也就成了一个值为""的text type node.

所以在判断时要注意补充nodeType的判断句,(if nodeType == 1)


Text Type: 文本节点。nodeType = 3

nodeName  = "#text"

nodeValue 为包含的文本。

parentNode 一定是一个Element Type Node。

没有子节点。

常用操作:

创建文本节点: document.createTextNode(“text”); 再去append到一个元素节点element上。

创建多个文本节点到某个元素上 需要再用element.normalize()来合并多个文本节点 否则会混乱。相反作用的方法是element.splitText(startPos); 从startPos截后面的字符串 , 将element的text节点分成两部分。

改变值:textNode.nodeValue = "new value";


Attribute Type: 属性节点。nodeType = 2

nodeName 是attribute的名字

nodeValue 是该attribute的值

parentNode = null

HTML中没有子节点 childNodes, XML中有。

常见操作方法: 参加ELEMENT元素中部分。


Document Type: nodeType = 9. 

在html的页面中,document type只有一种应用就是document这个实例, 同时我们可以通过window.document这个方式去访问。 

注意

1.Document Node 不存在parentNode 所以值为null。 子节点可能是DocumentType , Element, ProcessingInstruction或 Comment.

通常<html>元素就是document的子节点中的第0个节点。 即document.childNodes[0]. 也可以通过内置访问方式: document.documentElement来访问这个element节点。

2.<!docType>这个是document第二种可能的子节点。

理想的访问方式是document.doctype 但这个方式在IE8以下(含)不支持, 返回的都是null

3. 第三种可能的子节点是comment类型的。问题是各浏览器的支持力度不统一。 现实意义不大。

<!-- first comment -->

<html>

<body>

</body>

</html>

<!-- second comment -->

相关文章

  • 节点的类型与区分

    DOM 由 NODE构成, node包含以下12种类型。 最常见的几种 Element Type: 元素节点, n...

  • Zookeeper的三种角色

    ZK的三种角色也就是ZK服务器的三种节点类型(需要区分这里的“节点”和名字空间的“节点”):群首(leader),...

  • Zookeeper中的三种角色

    ZK的三种角色也就是ZK服务器的三种节点类型(需要区分这里的“节点”和名字空间中的“节点”):群首(leader)...

  • JS与Leetcode - 链表删除类型

    一、 链表删除类型注意事项 首先判空, 若为空,则直接返回 区分删除头节点 还是 删除其余节点, 因为在代码中对于...

  • JavaScript typeof运算符

    只能区分值类型,不能区分引用类型,能区分出函数来。

  • Python数据类型详解

    数值类型 整数类型 int Python 3 之后,整数类型为 int ,不在区分整型与长整型,(Python2....

  • 5.2 二叉树

    节点度数不超过2的树,称作二叉树(binary tree)同一节点的子节点与子树,均以左右区分,即lChild()...

  • 如何使用泛型链表

    LinkedList是泛型链表,也是用节点存取,节点类型为LinkedListNode ,与ListDict...

  • 关于 nodeType 、nodeName 、nodeValue

    nodeType 属性: 每个节点都有一个 nodeType 属性,用于表明节点的类型,节点类型由 Node 类型...

  • 《Java8学习笔记》读书笔记(五)

    第4章 认识对象 学习目标 区分基本类型与对象类型 了解对象与引用的关系 从打包器认识对象 ...

网友评论

      本文标题:节点的类型与区分

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