javascript dom.docx
《javascript dom.docx》由会员分享，可在线阅读，更多相关《javascript dom.docx（32页珍藏版）》请在冰点文库上搜索。
javascriptdom
什么是DOM？
通过JavaScript，您可以重构整个HTML文档。
您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。
这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
在1998年，W3C发布了第一级的DOM规范。
这个规范允许访问和操作HTML页面中的每一个单独的元素。
所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也几乎难觅踪影了。
DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。
DOM被分为不同的部分（核心、XML及HTML）和级别（DOMLevel1/2/3）：
CoreDOM
定义了一套标准的针对任何结构化文档的对象
XMLDOM
定义了一套标准的针对XML文档的对象
HTMLDOM
定义了一套标准的针对HTML文档的对象。
HTMLDOM节点
HTML文档中的每个成分都是一个节点。
节点
根据DOM，HTML文档中的每个成分都是一个节点。
DOM是这样规定的：
∙整个文档是一个文档节点
∙每个HTML标签是一个元素节点
∙包含在HTML元素中的文本是文本节点
∙每一个HTML属性是一个属性节点
∙注释属于注释节点
Node层次
节点彼此都有等级关系。
HTML文档中的所有节点组成了一个文档树（或节点树）。
HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
文档树（节点数）
请看下面这个HTML文档：
DOMTutorialDOMLessonone
Helloworld!
上面所有的节点彼此间都存在关系。
除文档节点之外的每个节点都有父节点。
举例，
和的父节点是节点，文本节点"Helloworld!
"的父节点是
节点。
大部分元素节点都有子节点。
比方说，
节点有一个子节点：
节点。</p><p><title>节点也有一个子节点：</p><p>文本节点"DOMTutorial"。</p><p>当节点分享同一个父节点时，它们就是同辈（同级节点）。</p><p>比方说，<h1>和<p>是同辈，因为它们的父节点均是<body>节点。</p><p>节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。</p><p>比方说，所有的文本节点都是<html>节点的后代，而第一个文本节点是<head>节点的后代。</p><p>节点也可以拥有先辈。</p><p>先辈是某个节点的父节点，或者父节点的父节点，以此类推。</p><p>比方说，所有的文本节点都可把<html>节点作为先辈节点。</p><p>HTMLDOM访问节点</p><p>通过DOM，您可访问HTML文档中的每个节点。</p><p>查找并访问节点</p><p>你可通过若干种方法来查找您希望操作的元素：</p><p>∙通过使用getElementById（）和getElementsByTagName（）方法</p><p>∙通过使用一个元素节点的parentNode、firstChild以及lastChild属性</p><p>getElementById（）和getElementsByTagName（）</p><p>getElementById（）和getElementsByTagName（）这两种方法，可查找整个HTML文档中的任何HTML元素。</p><p>这两种方法会忽略文档的结构。</p><p>假如您希望查找文档中所有的<p>元素，getElementsByTagName（）会把它们全部找到，不管<p>元素处于文档中的哪个层次。</p><p>同时，getElementById（）方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。</p><p>这两种方法会像您提供任何你所需要的HTML元素，不论它们在文档中所处的位置！</p><p>getElementById（）可通过指定的ID来返回元素：</p><p>getElementById（）语法</p><p>document.getElementById（"ID"）;</p><p>注释：</p><p>getElementById（）无法工作在XML中。</p><p>在XML文档中，您必须通过拥有类型id的属性来进行搜索，而此类型必须在XMLDTD中进行声明。</p><p>getElementsByTagName（）方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。</p><p>getElementsByTagName（）可被用于任何的HTML元素：</p><p>getElementsByTagName（）语法</p><p>document.getElementsByTagName（"标签名称"）;</p><p>或者：</p><p>document.getElementById（'ID'）.getElementsByTagName（"标签名称"）;</p><p>实例1</p><p>下面这个例子会返回文档中所有<p>元素的一个节点列表：</p><p>document.getElementsByTagName（"p"）;</p><p>实例2</p><p>下面这个例子会返回所有<p>元素的一个节点列表，且这些<p>元素必须是id为"maindiv"的元素的后代：</p><p>document.getElementById（'maindiv'）.getElementsByTagName（"p"）;</p><p>节点列表（nodeList）</p><p>当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：</p><p>varx=document.getElementsByTagName（"p"）;</p><p>现在，变量x包含着页面中所有<p>元素的一个列表，并且我们可以通过它们的索引号来访问这些<p>元素。</p><p>注释：</p><p>索引号从0开始。</p><p>您可以通过使用length属性来循环遍历节点列表：</p><p>varx=document.getElementsByTagName（"p"）;</p><p>for（vari=0;i<x.length;i++）</p><p>{</p><p>//dosomethingwitheachparagraph</p><p>}</p><p>您也可以通过索引号来访问某个具体的元素。</p><p>要访问第三个<p>元素，您可以这么写：</p><p>vary=x[2];</p><p>parentNode、firstChild以及lastChild</p><p>这三个属性parentNode、firstChild以及lastChild可遵循文档的结构，在文档中进行“短距离的旅行”。</p><p>请看下面这个HTML片段：</p><p><table></p><p><tr></p><p><td>John</td></p><p><td>Doe</td></p><p><td>Alaska</td></p><p></tr></p><p></table></p><p>在上面的HTML代码中，第一个<td>是<tr>元素的首个子元素（firstChild），而最后一个<td>是<tr>元素的最后一个子元素（lastChild）。</p><p>此外，<tr>是每个<td>元素的父节点（parentNode）。</p><p>对firstChild最普遍的用法是访问某个元素的文本：</p><p>varx=[aparagraph];</p><p>vartext=x.firstChild.nodeValue;</p><p>parentNode属性常被用来改变文档的结构。</p><p>假设您希望从文档中删除带有id为"maindiv"的节点：</p><p>varx=document.getElementById（"maindiv"）;</p><p>x.parentNode.removeChild（x）;</p><p>首先，您需要找到带有指定id的节点，然后移至其父节点并执行removeChild（）方法。</p><p>根节点</p><p>有两种特殊的文档属性可用来访问根节点：</p><p>∙document.documentElement</p><p>∙document.body</p><p>第一个属性可返回存在于XML以及HTML文档中的文档根节点。</p><p>第二个属性是对HTML页面的特殊扩展，提供了对<body>标签的直接访问。</p><p>HTMLDOM节点信息</p><p>nodeName、nodeValue以及nodeType包含有关于节点的信息。</p><p>节点信息</p><p>每个节点都拥有包含着关于节点某些信息的属性。</p><p>这些属性是：</p><p>∙nodeName（节点名称）</p><p>∙nodeValue（节点值）</p><p>∙nodeType（节点类型）</p><p>nodeName</p><p>nodeName属性含有某个节点的名称。</p><p>∙元素节点的nodeName是标签名称</p><p>∙属性节点的nodeName是属性名称</p><p>∙文本节点的nodeName永远是#text</p><p>∙文档节点的nodeName永远是#document</p><p>注释：</p><p>nodeName所包含的XML元素的标签名称永远是大写的</p><p>nodeValue</p><p>对于文本节点，nodeValue属性包含文本。</p><p>对于属性节点，nodeValue属性包含属性值。</p><p>nodeValue属性对于文档节点和元素节点是不可用的。</p><p>nodeType</p><p>nodeType属性可返回节点的类型。</p><p>最重要的节点类型是：</p><p>元素类型</p><p>节点类型</p><p>元素</p><p>1</p><p>属性</p><p>2</p><p>文本</p><p>3</p><p>注释</p><p>8</p><p>文档</p><p>9</p><p>一个HTMLDOM实例</p><p>一个HTMLDOM的实例</p><p>下面这个例子向我们展示了当一个用户在文档中点击时，HTML文档的背景颜色如何被改变。</p><p><html></p><p><head></p><p><scripttype="text/javascript"></p><p>functionChangeColor（）</p><p>{</p><p>document.body.bgColor="yellow"</p><p>}</p><p></script></p><p></head></p><p><bodyonclick="ChangeColor（）"></p><p>Clickonthisdocument!</p><p></body></p><p></html></p><p>DOM的核心：</p><p>Node</p><p>由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：</p><p>Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：</p><p>Js代码</p><p>1.Node.ELEMENT_NODE </p><p>（1） </p><p>2.Node.ATTRIBUTE_NODE </p><p>（2） </p><p>3.Node.TEXT_NODE （3） //<!</p><p>[CDATA[ ]]>中括着的纯文本，它没有子节点 </p><p>4.Node.CDATA_SECTION_NODE （4） //子节点一定为TextNode </p><p>5.Node.ENTITY_REFERENCE_NODE （5） </p><p>6.Node.ENTITY_NODE （6） //DTD中的实体定义<!</p><p>ENTITY foo “foo”>，无子节点 </p><p>7.Node.PROCESSING_INSTRUCTION_NODE （7） //PI，无子节点 </p><p>8.Node.COMMENT_NODE （8） </p><p>9.Node.DOCUMENT_NODE （9） //最外层的Root element,包括所有其它节点 </p><p>10.Node.DOCUMENT_TYPE_NODE （10） //DTD，<!</p><p>DOCTYPE………..> </p><p>11.Node.DOCUMENT_FRAGMENT_NODE （11） </p><p>12.Node.NOTATION_NODE （12） //DTD中的Nation定义 </p><p>Node.ELEMENT_NODE</p><p>（1）</p><p>Node.ATTRIBUTE_NODE</p><p>（2）</p><p>Node.TEXT_NODE（3）//<!</p><p>[CDATA[]]>中括着的纯文本，它没有子节点</p><p>Node.CDATA_SECTION_NODE（4）//子节点一定为TextNode</p><p>Node.ENTITY_REFERENCE_NODE（5）</p><p>Node.ENTITY_NODE（6）//DTD中的实体定义<!</p><p>ENTITYfoo“foo”>，无子节点</p><p>Node.PROCESSING_INSTRUCTION_NODE（7）//PI，无子节点</p><p>Node.COMMENT_NODE（8）</p><p>Node.DOCUMENT_NODE（9）//最外层的Rootelement,包括所有其它节点</p><p>Node.DOCUMENT_TYPE_NODE（10）//DTD，<!</p><p>DOCTYPE………..></p><p>Node.DOCUMENT_FRAGMENT_NODE（11）</p><p>Node.NOTATION_NODE（12）//DTD中的Nation定义</p><p>❑Node接口包含的特性/方法</p><p>节点的属性</p><p>nodeName属性将返回一个字符串，其内容是给定节点的名字。</p><p>如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text的字符串；</p><p>nodeType属性将返回一个整数，这个数值代表给定节点的类型</p><p>nodeValue属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；</p><p>ownerDocument指向这个节点所属的文档</p><p>attributes包哈勒代表一个元素的特性的Attr对象；仅用于Element节点</p><p>childNodes所有子节点的列表</p><p>firstChild指向在childNodes列表中的第一个节点</p><p>lastChild指向在childNodes列表中的最后一个节点</p><p>nextSibling指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null</p><p>previousSibling指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null</p><p>parentNode返回一个给定节点的父节点</p><p>❑hasChildNodes（）当childNodes包含一个或多个节点时，返回真</p><p>❑appendChild（node）将node添加到childNodes的末尾</p><p>❑removeChild（node）将node从childNodes中删除</p><p>❑insertBefore（newnoderefnode）在childNodes中的refnode之前插入newnode</p><p>Js代码</p><p>1.var container = document.getElementById（"content"）; </p><p>2.var message = document.getElementById（"fineprint"）; </p><p>3.var para = document.createElement（"p"）; </p><p>4.container.insertBefore（para,message）; </p><p>varcontainer=document.getElementById（"content"）;</p><p>varmessage=document.getElementById（"fineprint"）;</p><p>varpara=document.createElement（"p"）;</p><p>container.insertBefore（para,message）;</p><p> ❑replaceChild（newnode,oldnode）将childNodes中的oldnode替换成newnode</p><p>Js代码</p><p>1.var container = document.getElementById（"content"）; </p><p>2.var message = document.getElementById（"fineprint"）; </p><p>3.var para = document.createElement（"p"）; </p><p>4.container.replaceChild（para,message）; </p><p>varcontainer=document.getElementById（"content"）;</p><p>varmessage=document.getElementById（"fineprint"）;</p><p>varpara=document.createElement（"p"）;</p><p>container.replaceChild（para,message）;</p><p> ❑获得Node：</p><p>Js代码</p><p>1./* 通过document对象 */ </p><p>2.var oHtml = document.documentElement; </p><p>3. </p><p>4. </p><p>5./* 得到<head />和<body /> */ </p><p>6.var oHead = oHtml.firstChild; </p><p>7.var oBody = oHtml.lastChild; </p><p>8./* 可以用这种方式 */ </p><p>9.var oHead = oHtml.childNodes[0]; </p><p>10.var oBody = oHtml.childNodes[1]; </p><p>11./* 也可以使用方法获取数组的索引值 */ </p><p>12.var oHead = oHtml.childNodes.item（0）; </p><p>13.var oBody = oHtml.childNodes.item</p><p>（1）; </p><p>14./* 使用document.body来得到<body /> */ </p><p>15.var oBody = document.body; </p><p>/*通过document对象*/</p><p>varoHtml=document.documentElement;</p><p> </p><p>/*得到<head/>和<body/>*/</p><p>varoHead=oHtml.firstChild;</p><p>varoBody=oHtml.lastChild;</p><p>/*可以用这种方式*/</p><p>varoHead=oHtml.childNodes[0];</p><p>varoBody=oHtml.childNodes[1];</p><p>/*也可以使用方法获取数组的索引值*/</p><p>varoHead=oHtml.childNodes.item（0）;</p><p>varoBody=oHtml.childNodes.item</p><p>（1）;</p><p>/*使用document.body来得到<body/>*/</p><p>varoBody=document.body;</p><p>❑createElement（element）</p><p>创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。</p><p>eg）varpara=document.createElement（"p"）;</p><p>document.body.appendChild（para）;</p><p>❑createTextNode（）</p><p>创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：</p><p>reference=document.createTextNode（）</p><p>参数为新建文本节点所包含的文本字符串</p><p>Js代码</p><p>1.var message = document.createTextNode（"hello world"）; </p><p>2.var container = document.createElement（"p"）; </p><p>3.container.appendChild（message）; </p><p>4.document.body.appendChild（container）; </p><p>varmessage=document.createTextNode（"helloworld"）;</p><p>varcontainer=document.createElement（"p"）;</p><p>container.appendChild（message）;</p><p>document.body.appendChild（container）;</p><p> ❑cloneNode（）</p><p>reference=node.cloneNode（deep）</p><p>为给定节点创建一个副本，参数为true或者false，true表示同时复制该节点的子节点，false则不复制任何子节点。</p><p>Js代码</p><p>1.var para = document.createElement（"p"）; </p><p>2.var message = document.createTextNode（"hello world"）; </p><p>3.para.appendChild（message）; </p><p>4.document.body.appendChild（para）; </p><p>5.var newpara = para.cloneNode（true）; </p><p>6.document.body.appendChild（newpara）; </p><p>varpara=document.createElement（"p"）;</p><p>varmessage=document.createTextNode（"helloworld"）;</p><p>para.appendChild（message）;</p><p>document.body.appendChild（para）;</p><p>varnewpara=para.cloneNode（true）;</p><p>document.body.appendChild（newpara）;</p><p>❑检测节点类型</p><p>通过使用nodeType特性检验节点类型：</p><p>alert（document.nodeType）;//outputs"9"</p><p>alert（document.documentElement.nodeType）;//outputs"1"</p><p>这个例子中，document.nodeType返回9，等于Node.DOCUMENT_NODE；同时document.documentElement.nodeType返回1，等于Node.ELEMENT_NODE。</p><p>也可以用Node常量来匹配这些值：</p><p>alert（document.nodeType==Node.DOCUMENT_NODE）;//true</p><p>alert（document.documentElement.nodeType==Node.ELEMENT_NODE）;//true</p><p>这段代码可以在Mozilla1.0+、Opera7.0+和Safari1.0+上正常运行。</p><p>但是IE不支持这些常量，所以这些代码在IE上会产生错误。</p><p>❑处理特性</p><p>即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。</p><p>Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：</p><p>getNamedItem（name）返回nodeName属性值等于name的节点；</p><p>removeNamedItem（name）删除nodeName属性值等于name的节点；</p><p>setNamedItem（node）将node添加到列表中，按其nodeName属性进行索引；</p><p>item（pos） 像NodeList一样，返回在位置pos的节点；</p><p>请记住这些方法都是返回一个Attr节点，而非特性值。</p><p>NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。</p><p></p>
</div>
<div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div>
<script>
function showmore()
{
$(".readmore").hide();
$(".detail-article").css({
"height":"auto",
"overflow": "hidden"
});
}
$(document).ready(function() {
var dh = $(".detail-article").height();
if(dh >100)
{
$(".detail-article").css({
"height":"100px",
"overflow": "hidden"
});
}
else
{
$(".readmore").hide();
}
});
</script>
</div>
<script>
var defaultShowPage = parseInt("20");
var id = "1624206";
var total_page = "32";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://m.bingdoc.com/d-1624206.html';
}
function relate() {
var reltop = $('#relate').offset().top-50;
$("html,body").animate({ scrollTop: reltop }, 500);
}
</script>
<div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18947449.html" title="汽轮机在运行中的维护常识.docx">汽轮机在运行中的维护常识.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18947413.html" title="初中语文20段满分作文结尾.docx">初中语文20段满分作文结尾.docx</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18947175.html" title="大学课程《公路测设技术》教学PPT课件：91-纬地道路CAD软件路基设计表加密计算.pptx.pptx">大学课程《公路测设技术》教学PPT课件：91-纬地道路CAD软件路基设计表加密计算.pptx.pptx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18946979.html" title="“社会助医、防贫共富”工程实施方案.docx">“社会助医、防贫共富”工程实施方案.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18946709.html" title="冲压（剪）机械安全技术.docx">冲压（剪）机械安全技术.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18946701.html" title="锅炉事故处理紧急停炉操作.docx">锅炉事故处理紧急停炉操作.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18946655.html" title="小学英语10大类主题作文写作技巧汇总.docx">小学英语10大类主题作文写作技巧汇总.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18946628.html" title="九年级数学上册【常考易错】精选32个知识点.docx">九年级数学上册【常考易错】精选32个知识点.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18946626.html" title="初中数学考试5种解题策略.docx">初中数学考试5种解题策略.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bingdoc.com/p-18946623.html" title="初中数学复习易错考点65条.docx">初中数学复习易错考点65条.docx</a>
</li>
</ul>
</div>
</div>
<div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439730.html" target="_parent" title="中考语文记叙文阅读专题训练含答案Word文档格式.docx">中考语文记叙文阅读专题训练含答案Word文档格式.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439731.html" target="_parent" title="注会《税法》考试真题及答案Word文档格式.docx">注会《税法》考试真题及答案Word文档格式.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439732.html" target="_parent" title="2023医科实习自我鉴定参考Word文档下载推荐.docx">2023医科实习自我鉴定参考Word文档下载推荐.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439733.html" target="_parent" title="高中地理必修二知识点归纳人教版Word文档格式.docx">高中地理必修二知识点归纳人教版Word文档格式.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439734.html" target="_parent" title="田径裁判法教案Word格式文档下载.docx">田径裁判法教案Word格式文档下载.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439735.html" target="_parent" title="幼儿园如何评课的反思Word格式.docx">幼儿园如何评课的反思Word格式.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439736.html" target="_parent" title="老师教师节演讲稿范文5篇文档格式.docx">老师教师节演讲稿范文5篇文档格式.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439737.html" target="_parent" title="2023医疗咨询团队培训参考心得体会文档格式.docx">2023医疗咨询团队培训参考心得体会文档格式.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bingdoc.com/p-1439738.html" target="_parent" title="中秋节提前的祝福短信Word文件下载.docx">中秋节提前的祝福短信Word文件下载.docx</a></li>
</ul>
</div>
</div>
<div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;">
相关搜索</div>
<div class="widget-box pt0" style="border: none; padding:0px 5px;">
<ul class="taglist--inline multi">
<li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=javascript">javascript</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=dom">dom</a></li> </ul>
</div>
<br />
<div >
当前位置：<a target="_parent" href="https://m.bingdoc.com/">首页</a> >
<a href="https://m.bingdoc.com/booklist-00004.html">自然科学</a><span> > </span><a href="https://m.bingdoc.com/booklist-0000400005.html">数学</a>
</div>
<br />
<div class="cssnone">
<iframe title="来源" src="https://m.bingdoc.com/BookRead.aspx?id=ZKq4L1ZElBo%3d" frameborder="0" style="width: 0px; height: 0px">
</iframe>
</div>
<span id="LabelScript"></span>
<script src="https://mstatic.bingdoc.com/JS/bootstrap-collapse.js"></script>
</form>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div class="siteInner">
<p style="text-align: center;">copyright@ 2008-2023 冰点文库 网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备19020893号-</a>2</p><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f82ede2a6dd69d4ed35205d3eb25b840";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script>
</div>
</div>
<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.bingdoc.com/" title="冰点文库"><img src="https://www.bingdoc.com/images/logo_bd.png" alt="冰点文库"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">
<li><a target="_parent"href="https://m.bingdoc.com/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.bingdoc.com/">首页 </a></li>
<li><a target="_parent"href="https://m.bingdoc.com/booklist-0.html">资源分类 </a></li>
<li><a target="_parent"href="https://m.bingdoc.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bingdoc.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bingdoc.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li>
<li><a target="_parent"href="https://m.bingdoc.com/newslist.html">通知公告 </a></li>
<li><a target="_parent"href="https://m.bingdoc.com/h-0.html">帮助中心 </a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>
<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.bingdoc.com/p-1624206.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx3a9604896163fa38', // 必填，公众号的唯一标识
timestamp: '1726972010', // 必填，生成签名的时间戳
nonceStr: '9CF81D8026A9018052C429CC4E56739B', // 必填，生成签名的随机串
signature: '4d2551fa71932b3a7a47041f0a312f834e39fc1b',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.bingdoc.com/p-1624206.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx3a9604896163fa38', // 必填，公众号的唯一标识
timestamp: '1726972010', // 必填，生成签名的时间戳
nonceStr: '9CF81D8026A9018052C429CC4E56739B', // 必填，生成签名的随机串
signature: '4d2551fa71932b3a7a47041f0a312f834e39fc1b',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.bingdoc.com/header.aspx";
$.get(url + "?t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>
<script src="https://mstatic.bingdoc.com/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>