JavaScritpt的DOM初探之Node

Posted 漫长学习路

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScritpt的DOM初探之Node相关的知识,希望对你有一定的参考价值。

DOM(文档对象模型)是针对html和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的某一部分。DOM脱胎于微软公司的DHTLM(动态HTML),但是现在它已经成为表现和操作页面标记的真正跨平台,语言中立的方式。

javascript和DOM通常被视为一个单一的实体,因为JavaScript是最常见的用于此目的(与web上的内容交互)。 使用DOM API访问、遍历和操作HTML和XML文档。

技术分享

典型的DOM的基本轮廓层次结构(简化)

这里有一个关于DOM的一些值得注意的事情:

  • 窗口对象作为全局对象,您只需键入“窗口”访问它。 在这个对象的所有执行JavaScript代码。 像所有对象的属性和方法。
    • 属性是一个变量存储在一个对象。 网页上创建的所有变量authomatically成为窗口对象的属性。
    • 一个方法是存储在一个对象的函数。 以来所有的功能都存储在窗口对象(至少)下他们都可以称为“方法”。
  • DOM创建一个hierarcy对应于每个web文档的结构。 这种层次结构是由节点。 有几种不同类型的DOM节点,最重要的是“元素”,“文本”和“文档”。
    • 一个“元素”节点表示一个元素在一个页面。 如果你有一个段落元素(“< p >”),那么它可以通过访问DOM节点。
    • “文本”节点表示一个页面内所有文本(元素)。 所以如果你的段落的文本可以直接通过DOM访问。
    • 文档的节点代表整个文档。 (这是DOM层次/树的根节点)。
    • 还要注意,元素属性是DOM节点本身。
  • 每个布局引擎实现DOM标准略有不同。 例如,火狐使用web浏览器壁虎布局引擎,有一个很好的实现(虽然不是完全内联与W3C规范)Internet Explorer,它使用三叉戟布局引擎闻名车和不完整的实现,导致web开发社区内的多痛苦!
Node类型:

dom1级定义了一个NODE接口,该接口将由DOM中的所有节点类型实现。这个Node接口在javaScript中是作为node类型实现的,除了IE之外,在其他所有浏览器中都可以访问到这个类型。javaScript中的所有节点都继承自NODE类型,因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个nodeType属性,用于表明节点的类型。节点类型由在node类型中定义的下列12个数值常量来表示,任何节点类型必居其一:

 Node.ELEMENT_NODE(1);

 Node.ATTRIBUTE_NODE(2);

 Node.TEXT_NODE(3);

 Node.CDATA_SECTION_NODE(4);

 Node.CDATA_REFERENCE_NODE(5);

 Node.ENTITY_NODE(6);

 Node.PROCESSING_INSTRUCTION_NODE(7);

 Node.COMMENT_NODE(8);

 Node.DOCUMENT_NODE(9);

 NODE.DOCUMENT_TYPE_NODE(10);

Node.DOCUMENT_FRAGMENT_NODE(11);

Node.NOTATION_NODE(12)

通过比较上面这些常量,可以很容易地确定节点的类型,例如:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>test for javascript</title>
</head>
<body>
<p id="a">漫步人生路!</p>
<p>
<script type="text/javascript">
  var someNode=document.getElementById('a');
	alert(someNode.nodeType);
</script>
</body>
</html>

要了解Node节点的信息可以使用nodeName和nodeValue这两个属性:

<script type="text/javascript">
  var someNode=document.getElementById('a');
	alert(someNode.nodeType);
	alert(someNode.nodeName); //是元素的标签名 <p>
	alert(someNode.nodeValue); //要坚持node是不是一个元素只要看nodeValue的值为null就可以了
</script>





以上是关于JavaScritpt的DOM初探之Node的主要内容,如果未能解决你的问题,请参考以下文章

进阶之初探nodeJS

进阶之初探nodeJS

React初探之React特性

Node.js 服务端实践之 GraphQL 初探

在QML 中用javascritpt 将中文转换拼音,可以在音标

初探LINUX之--基础知识篇