HTML中的Node和Element的区别

8 篇文章 0 订阅
4 篇文章 0 订阅

元素(Element)和结点(Node)的区别,元素是一个小范围的定义,必须是含有完整信息的结点才是一个元素,例如<div>…</div>。但是一个结点不一定是一个元素,而一个元素一定是一个结点。

HTML-Guidelines-for-Usability-SEO
什么是node:

NODE是相对TREE这种数据结构而言的。TREE就是由NODE组成。这个部分你可以参考离散数学的树图。

什么是element

ELEMENT则是HTML里的概念,是元素即标签包含内部属性及内容的总体,是HTML中的数据的组成部分之一。

从范围上讲DOM将文档中的所有都看作节点,也就是说node>element

1.DOM在解析文档的时候按整个文档的结构生成一棵树,全部保存在内存。优点就是整个文档都一直在内存中,我们可以随时访问任何节点,并且对树的遍历也是比较熟悉的操作;缺点则是耗内存,并且必须等到所有的文档都读入内存才能进行处理。

2.一个需要注意的地方就是,HTML文档两个标签之间的空白也是这棵树的一个节点(Text节点)。 <a> <b></b> <a> 中a有三个节点。

node有几个子类型:Element,Text, Attribute,RootElement,Comment,Namespace等。

综上理解:Element是可以有属性和子节点的node。Element是从Node继承的。

除以上需要了解的,我们还需要js操作元素节点的另一种方法Element Traversal Specification。该接口是w3c在2008年12月22日发布的规范,用于Element Traversal规范定义了ElementTraversal接口,它允许脚本遍历DOM树中的元素(element)节点,而不包含元素节点之外的其他节点,如注释节点、文字节点等。这个规范给我们提供了快速、方便的方法来访问元素节点。在以前的方法中,我们使用firstChild、nextSibling、childNodes、childrem等方法来进行遍历,但要得到元素节点,我们还需要来判断节点的类型。

ElementTraversal接口定义了5个属性,是元素节点必须要实现的,这5个属性的原始定义如下,这些属性,看名字就不难明白它的含义,不进行翻译成中文了:

firstElementChild:Returns the first child element node of this element. null if this element has no child elements.

lastElementChild:Returns the last child element node of this element. null if this element has no child elements.

previousElementSibling:Returns the previous sibling element node of this element. null if this element has no element sibling nodes that come before this one in the document tree.

nextElementSibling:Returns the next sibling element node of this element. null if this element has no element sibling nodes that come after this one in the document tree.

childElementCount:Returns the current number of element nodes that are children of this element. 0 if this element has no child nodes that are of nodeType .


from: http://www.smallhead.cn/technology/64.html

要获取 `IElementNode` 对象的 HTML 内容,你可以使用 `node.outerHtml()` 方法。这个方法将返回整个节点的 HTML 代码,包括其内部的所有子节点。如果你只想要节点内部的文本内容,你可以使用 `node.innerHtml()` 方法,这个方法将返回节点内部的所有文本内容,但不包括节点本身的 HTML 标签。下面是一个简单的示例代码: ```java import com.itextpdf.html2pdf.ConverterProperties; import com.itextpdf.html2pdf.HtmlConverter; import com.itextpdf.kernel.pdf.PdfDocument; import com.itextpdf.kernel.pdf.PdfWriter; import com.itextpdf.layout.element.IElement; import com.itextpdf.layout.element.IElementNode; import java.io.File; import java.io.IOException; import java.util.List; public class HtmlToPdfExample { public static void main(String[] args) throws IOException { String html = "<html><body>斜体文本</body></html>"; PdfWriter pdfWriter = new PdfWriter(new File("output.pdf")); PdfDocument pdfDocument = new PdfDocument(pdfWriter); ConverterProperties converterProperties = new ConverterProperties(); List<IElement> elements = HtmlConverter.convertToElements(html, converterProperties); for (IElement element : elements) { if (element instanceof IElementNode) { IElementNode node = (IElementNode) element; if ("em".equalsIgnoreCase(node.name())) { String nodeHtml = node.outerHtml(); System.out.println("Node HTML: " + nodeHtml); String nodeInnerText = node.innerHtml(); System.out.println("Node Inner Text: " + nodeInnerText); } } pdfDocument.add(element); } pdfDocument.close(); } } ``` 在这个示例代码,我们遍历 HTML 的每个元素,如果遇到了一个 `em` 标签,就将其转换为一个 `IElementNode` 对象。然后我们使用 `node.outerHtml()` 和 `node.innerHtml()` 方法分别获取节点的 HTML 内容和内部文本内容,并将其打印到控制台上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值