JS里面的DOM操作是什么

2025-03-04 12:34:24
推荐回答(3个)
回答1:

DOM(即 Document Object Mode) 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型

  • XML DOM - 针对 XML 文档的标准模型

  • HTML DOM - 针对 HTML 文档的标准模型

其中,在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。


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

  • 整个文档是一个文档节点

  • 每个 HTML 元素是元素节点

  • HTML 元素内的文本是文本节点

  • 每个 HTML 属性是属性节点

  • 注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。

DOM 处理中的常见错误是希望元素节点包含文本。
举个栗子:DOM 教程,元素节点 ,包含值为 "DOM 教程" 的文本节点。<br>可通过节点的 innerHTML 属性来访问文本节点的值。</pre> <p>一些常用的 HTML DOM 方法:</p> <p></p> <ul> <li><p>getElementById(id) - 获取带有指定 id 的节点(元素)</p></li> <li><p>appendChild(node) - 插入新的子节点(元素)</p></li> <li><p>removeChild(node) - 删除子节点(元素)</p></li> </ul> <p>一些常用的 HTML DOM 属性:</p> <p></p> <ul> <li><p>innerHTML - 节点(元素)的文本值</p></li> <li><p>parentNode - 节点(元素)的父节点</p></li> <li><p>childNodes - 节点(元素)的子节点</p></li> <li><p>attributes - 节点(元素)的属性节点</p></li> </ul> <p>DOM操作示例</p> <pre t="code" l="html"><html><br>    <body><br>        <p id="p1">Hello World!</p><br>        <script><br>            document.getElementById("p1").innerHTML="New text!";<br>            //内容变更为new text<br>            document.getElementById("p1").style.color="blue";<br>            //蓝色<br>        </script><br>    </body><br></html></pre></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答2:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>输出的是:(你那个p1有引号吗?)<br>你好,我是某某<br>p1<br>p1=document.getElementById('X') :获取通过document,根据ID为'X'来获取元素(对象),存放在变量p1处。<br>还有就是:<p id="X">你好,我是某某</p>的X和p1=document.getElementById('X')的X,是不一样的。</p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答3:</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>DOM即document object Model,即文档对象模型。说白了就是:只要你通过document获取的元素对象,那么你操作的元素就是一个对象。对象就是指:一堆属性和方法的集合。你写的那个代码意思是:通过文档去获取id属性名为x元素,并把获取到的id值赋值给变量p1。所以输出的结果是X。并且,你的代码p1=document.getElementById('X')前面应该加上var。虽然这种写法是正确的,但是这会涉及到作用域的问题!</p> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="wendaright"> <div class="wdluluerwema"> <div class="wdxgwttop">相关问答</div> <div class="wdxgwtnr"> </div> <div class="clear"></div> </div> <!-- 其他随机问答['id'=>alphaID($like['zid'])] --> <div class="wdluluerwema"> <div class="wdxgwttop">最新问答</div> <div class="wdxgwtnr"> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/1243225130451937539.html">父母都已经去世,房子一直空关着,现在想把它卖了,有简单的程序吗,因为房子只有父母的姓名,怎样转给我</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/2208541734048473308.html">猕猴桃的皮能吃吗 猕猴桃的皮有什么作用</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/207841622.html">大学英语三级a答案(B卷)</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/452039963.html">口袋妖怪黑白2等离子卡有什么用??</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/1052562357234043579.html">用什么中药洗头可治脱发</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/1927892812762738347.html">笔记本电脑开机有滴滴的声音没次8下会有四个一模一样的屏幕左边两个屏幕是清晰右边两个屏幕是蓝屏?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/1775678113899120860.html">电脑屏幕比例不对怎么办?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/495643545.html">哲学与宗教的区别是?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/1758698134690255068.html">现在有哪些智能聊天机器人</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.13l.net/l/1859822893387542947.html">大话西游2以前的金銮殿现在合成什么区了?</a></div> </div> </div> </div> </div> <div class="clear"></div> <div class="footer"> <!-- 移动底部导航 --> <div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://www.13l.net/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div> <div class="dibu"> <div class="dibu"> </div> </div> <div class="banquan"> <p>内容全部来源于网络收集,如有侵权,请联系网站删除:QQ:24596024</p> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?de17be6dbd20544dd6483cc235b540f9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>