html文本节点（html的节点）

本篇文章给大家谈谈html文本节点，以及html的节点对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、HTML DOM 中 元素节点和属性节点是什么关系
• 2、html里为什么在文本节点里的左尖括号是有危害性的
• 3、Html中如何区别节点、元素、元素的属性、元素的内容
• 4、什么叫文本节点？
• 5、HTML DOM结构

HTML DOM 中 元素节点和属性节点是什么关系

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型

节点类型

元素    1

属性    2

文本    3

注释    8

文档    9

在实际应用中，经常用到的就是元素节点、属性节点和文本节点了，下面我们通过小段代码进行讲解

1：元素节点

HEAD

  TITLE空谷悠悠/TITLE

 /HEAD

 BODY

  table

tr

td id="john" name="myname"John/td

tdDoe/td

td id="jack"Jack/td

/tr

  /table

  script

 var d = document.getElementById("john");

alert(d.nodeType)

alert(d.nodeName)

alert(d.nodeValue)

  /script

 /BODY

/HTML

分析运行结果，其三个属性的值分别为：

nodeType：ELEMENT_NODE

nodeType值：1

nodeName：元素标记名    //此处为TD

nodeValue：null

2：属性节点

HEAD

  TITLE空谷悠悠/TITLE

 /HEAD

 BODY

  table

tr

td id="john" name="myname"John/td

tdDoe/td

td id="jack"Jack/td

/tr

/table

script

 var d = document.getElementById("john").getAttributeNode("name");

alert(d.nodeType)

alert(d.nodeName)

alert(d.nodeValue)

  /script

 /BODY

/HTML

分析运行结果，其三个属性的值分别为：

nodeType：ATTRIBUTE_NODE

nodeType值：2

nodeName：属性名  // name

nodeValue：属性值  //myname

3:文本节点

HEAD

  TITLE New Document /TITLE

 /HEAD

 BODY

  table

tr

td id="john" name="myname"John/td

tdDoe/td

td id="jack"Jack/td

/tr

  /table

  script

    var d = document.getElementsByTagName("td")[0].firstChild

alert(d.nodeType)

alert(d.nodeName)

alert(d.nodeValue)

  /script

 /BODY

/HTML

分析运行结果，其三个属性的值分别为：

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容   // John

html里为什么在文本节点里的左尖括号是有危害性的

楼主您好

因为html语言本身的标签就是尖括号的 比如html head body div等，不少都是成对出现的，所以文本中有尖括号会让浏览器解析的时候不明确，不知道前一个尖括号应该对应哪一个后尖括号结束，所以应该转义成和(这一点xml更明显，要用cdata节。)

Html中如何区别节点、元素、元素的属性、元素的内容

## 节点 Node

- 节点是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点

- 例如： html标签、属性、文本、注释、整个文档等都是一个节点

- 节点的类型

- 节点是有类型的，不同节点的类型不同，按照大小关系分类如下

- 文档节点

- 表示的是 整个html

- 元素节点

- 表示的是 html 中的 **标签**

- 属性节点

- 表示的是 html标签 中的 **属性**

- 文本节点

- 表示的是 html标签 中的内容 **文本**

- 节点最终是要映射成为 js 对象，程序员操作这些对象来改变网页

- 属性和方法

- 不同的节点具有不同的属性和方法

什么叫文本节点？

你说的是xml？

文本节点就是没有被,包围的文本：ac/a中的c

HTML DOM结构

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

code

html

head

titleDOM 教程/title

/head

body

pHello world!/p

/body

/html

/code

上面的 HTML 中：

html节点没有父节点；它是根节点

head 和 body 的父节点是 html 节点

文本节点 "Hello world!" 的父节点是 p节点

html 节点拥有两个子节点：head 和 body

head节点拥有一个子节点：title 节点

title 节点也拥有一个子节点：文本节点 "DOM 教程"

head 元素是 html 元素的首个子节点

body 元素是 html 元素的最后一个子节点

p 元素是 body 元素的最后一个子节点

方法是我们可以在节点（HTML 元素）上执行的动作。

一些常用的 HTML DOM 方法：

一些常用的 HTML DOM 属性：

属性是节点（HTML 元素）的值，您能够获取或设置。

获取或替换HTML元素的值

规定节点的名称

规定节点的值

返回节点的类型，nodeType是只读的

访问 HTML DOM - 查找 HTML 元素。

访问 HTML 元素等同于访问节点

返回带有指定ID的元素

code

document.getElementByld("intro");

/code

返回带有指定标签名的所有元素

code

x = document.getElementByTagName("p");

document.write(x[0].innerHTML);

/code

查找带有相同类名的所有HTML元素

codedocument.getElementsByClassName("intro");/code

修改 HTML = 改变元素、属性、样式和事件。

改变元素内容的最简答的方法是使用 innerHTML 属性。

code

document.getElementById("p1").innerHTML="New text!";

/code

访问 HTML 元素的样式对象

code

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

/code

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

code

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

/code

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

添加、删除和替换 HTML 元素。

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

code

var para=document.createElement("p"); //创建文本节点

var node=document.createTextNode("This is new."); //向 p 元素追加文本节点

para.appendChild(node); //向已有元素追加这个新元素

/code

appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法。

如需删除 HTML 元素，您必须清楚该元素的父元素

code

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

/code

当想要删除一个子元素但是不知道他的父元素的时候，可以用parentNode来查找他的父元素。

code

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

/code

code

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

parent.replaceChild(para,child);

/code

HTML DOM 允许 JavaScript 对 HTML 事件作出反应

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

codeh1 onclick="this.innerHTML='hello!'"请点击这段文本！/h1/code

如需向 HTML 元素分配事件，可以使用事件属性

HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件

举例：为 button 元素分配 onclick 事件：

codescript

document.getElementById("myBtn").onclick=function(){displayDate()};

/script/code

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onchange 事件常用于输入字段的验证。

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

通过 HTML DOM，您能够使用节点关系在节点树中导航。

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

length 属性定义节点列表中节点的数量。

您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航

这里有两个特殊的属性，可以访问全部文档：

document.documentElement - 全部文档

document.body - 文档的主体

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

html文本节点的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html的节点、html文本节点的信息别忘了在本站进行查找喔。