test

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

body, table{font-family: 微软雅黑; font-size: 10pt}

table{border-collapse: collapse; border: solid gray; border-width: 2px 0 2px 0;}

th{border: 1px solid gray; padding: 4px; background-color: #DDD;}

td{border: 1px solid gray; padding: 4px;}

tr:nth-child(2n){background-color: #f8f8f8;}

</style>

</head>

<body>

<div>

<div><span style="font-size: medium; "><span style="font-weight: bold; ">Document Object Model&nbsp;</span>&nbsp; (document---&gt;html 文档---&gt;dom树)&nbsp;</span><span style="color: rgb(0, 0, 255); font-size: small; ">//方便开发者 前端工程师 去控制 更改 页面元素。自动用代码去控制页面元素。</span>

</div>

<div><span style="color: rgb(0, 0, 255); font-size: small; ">

<div>是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容、结构和样式.

</div></span>

</div>

<div><span style="font-size: medium; "><span style="font-weight: bold; ">分类:</span>xml dom + html dom (+</span>DOM Core<span style="font-size: medium; ">)</span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

<div><span style="font-size: medium; font-weight: bold; ">xml 介绍 &nbsp;</span>

</div>

<div><span style="font-size: medium; font-weight: bold; ">

<table style="font-family: 微软雅黑; font-size: 10pt; border-collapse: collapse; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: gray; border-right-color: gray; border-bottom-color: gray; border-left-color: gray; border-width: initial; border-top-width: 2px; border-right-width: 0px; border-bottom-width: 2px; border-left-width: 0px; table-layout: fixed; word-break: break-all; width: 620px; empty-cells: show; margin-left: 0px; background-color: rgb(234, 242, 211); ">

<tbody>

<tr>

<td style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: gray; border-right-color: gray; border-bottom-color: gray; border-left-color: gray; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; ">

<div><span style="font-weight: normal; ">&lt;school&gt;</span>

</div>

<div><span style="font-weight: normal; ">&emsp; &nbsp; &nbsp; &emsp;&lt;class&gt;</span>

</div>

<div><span style="font-weight: normal; ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;student&gt;zs&lt;/student&gt;</span>

</div>

<div><span style="font-weight: normal; ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;student&gt;zs&lt;/student&gt;</span>

</div>

<div><span style="font-weight: normal; ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;student&gt;zs&lt;/student&gt;</span>

</div>

<div><span style="font-weight: normal; ">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/class&gt;</span>

</div>

<div><span style="font-weight: normal; ">

<div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;class&gt;

</div>

<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;student&gt;zs&lt;/student&gt;

</div>

<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;student&gt;zs&lt;/student&gt;

</div>

<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;student&gt;zs&lt;/student&gt;

</div>

<div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/class&gt;

</div></span>

</div>

<div><span style="font-weight: normal; ">&lt;/school&gt;</span>

</div>

</td>

</tr>

</tbody>

</table><br /></span>

</div>

<div><span style="font-size: medium; ">&emsp;</span><img src="https://img-blog.csdnimg.cn/2022010615073584402.png" /><span style="font-size: medium; ">&emsp;&emsp;&emsp;</span>

</div>

<div><span style="font-size: medium; "><img src="https://img-blog.csdnimg.cn/2022010615073513497.png" /></span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

<div><span style="font-size: medium; ">

<div>

<h3>节点信息

</h3>

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

</p>

<ul>

<li>nodeName(节点名称)

</li>

<li>nodeValue(节点值)

</li>

<li>nodeType(节点类型)

</li>

</ul>

</div>

<div>

<h3>nodeName

</h3>

<p>nodeName属性含有节点的名称。

</p>

<ul>

<li>元素节点的nodeName是标签名称

</li>

<li>属性节点的nodeName是属性名称

</li>

<li>文本节点的nodeName永远是#text

</li>

<li>文档节点的nodeName永远是#document

</li>

</ul>

<p class="note"><span>注释:</span>nodeName所包含的XML元素的标签名称永远是大写的。

</p>

</div>

<div>

<h3>nodeValue

</h3>

<p>对于文本节点,nodeValue属性包含文本。

</p>

<p>对于属性节点,nodeValue属性包含属性值。

</p>

<p>nodeValue属性对于文档节点和元素节点是不可用的。

</p>

</div>

<div>

<h3>nodeType

</h3>

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

</p>

<h4>最重要的节点类型是:

</h4>

<table class="dataintable">

<tbody>

<tr>

<th>元素类型

</th>

<th>节点类型

</th>

</tr>

<tr>

<td>元素

</td>

<td>1

</td>

</tr>

<tr>

<td>属性

</td>

<td>2

</td>

</tr>

<tr>

<td>文本

</td>

<td>3

</td>

</tr>

<tr>

<td>注释

</td>

<td>8

</td>

</tr>

<tr>

<td>文档

</td>

<td>9

</td>

</tr>

</tbody>

</table>

</div></span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

<div><span style="font-size: medium; ">

<h3>

<dl>

<dt><span style="color: #0000ff">取得某个元素的值</span>

</dt>

<dd>本例使用getElementsByTagname()方法来取得&quot;books.xml&quot;中<span style="color: #ff0000">所有</span>&quot;title&quot;元素的值。

</dd>

<dt><span style="color: #0000ff">取得某个属性的值</span>

</dt>

<dd>本例使用getAttribute()方法来取得&quot;books.xml&quot;中<span style="color: #ff0000">所有</span>&quot;category&quot;属性的值。

</dd>

<dt><span style="color: #0000ff">取得某个项目的值</span>

</dt>

<dd>本例使用getNamedItem()方法来取得&quot;books.xml&quot;中<span style="color: #ff0000">所有</span>&quot;category&quot;属性的值。&nbsp;

</dd>

</dl>

</h3></span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

<div><span style="font-size: medium; "><br /></span>

</div>

</div>

</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值