我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

html中dom指的是什么-创新互联

这篇文章给大家分享的是有关html中dom指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联是一家集网站建设,彝良企业网站建设,彝良品牌网站建设,网站定制,彝良网站建设报价,网络营销,网络优化,彝良网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

一、DOM介绍

1、DOM简介

DOM是指文档对象模型,它是专门适用于HTML/XHTML的文档对象模型。如果你是一名软件开发人员,那么你可以将它理解为网页的API。DOM将网页中的各个元素都看作一个对象,使网页中的元素也可以被计算机语言获取或编辑,如javascript可以利用DOM动态地修改网页。

1.2、根据操作对象对DOM分类

按照操作对象的不同,可分为Core DOM、XML DOM 和 HTML DOM。

Core Dom:核心Dom,针对任何结构化文档的标准模型。

XML DOM:用于XML文档的标准模型,对XML元素进行操作。

HTML DOM: 用于HTML文档的标准模型,对HTML元素进行操作。

1.3、DOM功能

① 查询某个元素

② 查询某个元素的祖先、兄弟以及后代元素

③ 获取、修改元素的属性

④ 获取、修改元素的内容

⑤ 创建、插入和删除元素

二、DOM节点

文档中的所有内容都可表示为一个节点(node),如:HTML里整个文档、每个标签、每个标签的属性和文本都可作为一个节点。

2.1、节点分类

① 文档节点(Document):整个XML、HTML文档

② 元素节点(Element):每个XML、HTML元素

③ 属性节点(Attr):每个XML、HTML元素的属性

④ 文本节点(Text):每个XML、HTML元素内的文本

⑤ 注释节点(Comment):每个注释

注意:这里的Document节点为总称,具体可分为XMLDocument和HTMLDocument,同理Element也可分为XMLElement和HTMLElement。

2.2、HTML DOM节点层次

节点彼此都有等级关系:父节点、兄弟节点、子节点等等。

(1)示例:

HTML文档转换为HTML DOM节点树

html中dom指的是什么

(2)示例图分析

1) 元素和元素的父节点为元素。

2) 元素和元素为兄弟节点。

3) 元素为<head>元素的子节点。</p><p>三、HTML DOM节点属性</p><p>介绍HTML DOM节点属性,如:innerHTML、innerText、nodeName、nodeValue以及nodeType等。</p><p>3.1、innerHTML:以HTML代码格式获取或设置节点的内容</p><p>说明:以HTML格式赋值给innerHTML属性时,会以HTML的形式呈现。比如:node.innerHTML="<input type='button' value='按钮' />" 将会显示一个按钮。</p><p>示例:</p><pre>document.getElementById('div').innerHTML="<input type='button' value='按钮' />"; // 设置div元素的innerHTML为一个按钮 document.getElementById('div').innerHTML; // => <input type='button' value='按钮' /> :以HTML格式返回节点的内容</pre><p><img src="/upload/otherpic39/41201.jpg" alt="html中dom指的是什么"></p><p>3.2、innerText:获取或设置节点的文本内容</p><p>说明:以文本字符串的形式获取或设置节点的内容。</p><p>示例1:</p><p>赋值HTML格式内容<input type='button' value='按钮' /> 将会以字符串显示"<input type='button' value='按钮' />"。</p><p><img src="/upload/otherpic39/41202.jpg" alt="html中dom指的是什么"></p><p>示例2:</p><p>获取内容时,只会获取文本内容。</p><p><img src="/upload/otherpic39/41203.jpg" alt="html中dom指的是什么"></p><pre>document.getElementById('div').innerText; // => "文本1 文本2"</pre><p>3.3、nodeName:获取节点名称,只读属性</p><p>说明:</p><p><img src="/upload/otherpic39/41204.jpg" alt="html中dom指的是什么"></p><p>(学习视频分享:html视频教程)</p><p>示例:</p><pre>console.log( document.nodeName ); // => #document:文档节点 console.log( document.body.nodeName ); // => BODY:元素节点 console.log( document.getElementById('div').nodeName ); // => DIV:元素节点 console.log( document.getElementById('div').attributes.style.nodeName ); // => style:属性节点</pre><p>3.4、nodeValue:获取或设置节点的值</p><p>说明:文档节点、元素节点此属性返回null,并且为只读。</p><p><img src="/upload/otherpic39/41205.jpg" alt="html中dom指的是什么"></p><p>示例:</p><br/><p><img src="/upload/otherpic39/41206.jpg" alt="html中dom指的是什么"></p><pre>console.log( document.nodeValue ); // => null:文档节点 console.log( document.body.nodeValue ); // => null:元素节点 console.log( document.getElementById('div').nodeValue ); // => null:元素节点 console.log( document.getElementById('div').attributes.style.nodeValue ); // => width:200px;height:100px;border:1px solid black;:style属性的值 document.getElementById('div').attributes.style.nodeValue = ' width:200px;height:200px'; // 设置style属性的值</pre><p>3.5、nodeType:返回节点类型,只读属性</p><p>说明:</p><p><img src="/upload/otherpic39/41207.jpg" alt="html中dom指的是什么"></p><p>示例:</p><pre>console.log( document.nodeType ); // => 9:文档节点 console.log( document.body.nodeType ); // => 1:元素节点 console.log( document.getElementById('div').nodeType ); // => 1:元素节点 console.log( document.getElementById('div').attributes.style.nodeType ); // => 2:属性节点</pre><p>四、获取 HTML 元素节点方法</p><p>文档节点(document)、元素节点可以通过getElementById、getElementsByName、getElementsByClassName以及getElementsByTagName方法获取元素节点。</p><p>4.1、getElementById(id) :获取指定ID的元素</p><p>参数:</p><p>①id {string} :元素ID。</p><p>返回值:</p><p>{HtmlElement} 元素节点对象。若没有找到,返回null。</p><p>注意:</p><p>① HTML元素ID是区分大小写的。</p><p>② 若没有找到指定ID的元素,返回null。</p><p>③ 若一个父节点下面有多个相同ID元素时,默认选取第一个(而不是层级高的)。</p><p><img src="/upload/otherpic39/41208.jpg" alt="html中dom指的是什么"></p><p>示例:</p><pre>document.getElementById('div'); // => 获取ID为div的元素</pre><p>4.2、getElementsByName(name) :返回一个包含指定name名称的的元素数组</p><p>参数:</p><p>① name {string} :name名称。</p><p>返回值:</p><p>{Array} 符合条件的元素数组。若没有找到符合条件的,返回空数组。</p><p>示例:</p><pre>document.getElementsByName('Btn'); // 返回一个name为btn的元素数组</pre><p>4.3、getElementsByClassName(className) :返回一个包含指定class名称的的元素数组</p><p>参数:</p><p>① className {string} :class名称。</p><p>返回值:</p><p>{Array} 符合条件的元素数组。若没有找到符合条件的,返回空数组。</p><p>示例:</p><pre>document.getElementsByClassName('show'); // 返回一个class包含show的元素数组</pre><p>4.4、getElementsByTagName(elementName) :返回一个指定标签名称的的元素数组</p><p>参数:</p><p>① elementName {string} :标签名称。如:div、a等等</p><p>返回值:</p><p>{Array} 符合条件的元素数组。若没有找到符合条件的,返回空数组。</p><p>示例:</p><pre>document.getElementsByTagName('div'); // 返回一个标签为div的元素数组</pre><p>感谢各位的阅读!关于“html中dom指的是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!</p> <br> 文章标题:html中dom指的是什么-创新互联 <br> 文章分享:<a href="http://mswzjz.cn/article/cegjee.html">http://mswzjz.cn/article/cegjee.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/ddphhoc.html">linux命令大于号 linux大于符号</a> </li><li> <a href="/article/ddphpee.html">腾讯云服务器怎么换机房 腾讯云服务器怎么转让</a> </li><li> <a href="/article/ddphpih.html">腾讯云服务器登录淘宝店铺 腾讯云服务器怎么在手机上登录?</a> </li><li> <a href="/article/ddphpjj.html">腾讯云linux配置服务器 腾讯云服务器配置https</a> </li><li> <a href="/article/ddphppj.html">服务号里的域名怎么设置 服务号设置教程</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括:高端网站建设, 集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述:描述您的需求,如网站、微信、电商、APP等。"></textarea> <a href="">提交需求</a> </form> </div> </div> <div class="footA"> <div class="footAs container"> <ul> <h3>联系我们</h3> <b>028-86922220</b> <li>手机:13518219792</li> <li>地址:成都市太升南路288号锦天国际A幢1002号</li> <li class="hr1"></li> <li>24小时服务热线:400-028-6601</li> </ul> <ul> <h3>网站建设服务</h3> <li>网页设计</li> <li>网站制作</li> <li>网站开发</li> </ul> <ul> <h3>网站推广服务</h3> <li>营销网站建设</li> <li>百度快速排名</li> <li>整站网站推广</li> </ul> <ul> <h3>网站运维服务</h3> <li>基础维护</li> <li>网站改版</li> <li>网站维护</li> </ul> <ul> <h3>FOLLOW US</h3> <li class="hr2"></li> <li> <dd class="fl"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd> <dd class="fr"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd> </li> </ul> </div> <div class="link container"> 友情链接: <a href="http://www.cdxwcx.cn/tuoguan/" title="成都主机托管" target="_blank">成都主机托管</a>   <a href="http://www.hongyifilm.cn/" title="鸿艺文化" target="_blank">鸿艺文化</a>   <a href="https://www.scvps.cn/" title="注册域名" target="_blank">注册域名</a>   <a href="https://www.yanbangzhuzx.com/" title="研帮主咨询" target="_blank">研帮主咨询</a>   <a href="https://www.cdcxhl.com/idc/cqstsx.html" title="重庆水土双线托管" target="_blank">重庆水土双线托管</a>   <a href="http://www.bzwzjz.com/serve/" title="高端网站策划" target="_blank">高端网站策划</a>   <a href="http://www.cxhljz.cn/" title="成都网站设计公司" target="_blank">成都网站设计公司</a>   <a href="http://seo.cdkjz.cn/seo/" title="成都SEO优化公司" target="_blank">成都SEO优化公司</a>   <a href="http://www.cdhuace.com/faguangzi/wbfgz.html" title="led无边发光字" target="_blank">led无边发光字</a>   <a href="https://www.scvps.cn/" title="虚拟主机" target="_blank">虚拟主机</a>    </div> </div> <div class="footB"> <div class="container"> <div class="fl"> Copyright © 2022 四川攀枝花网站建设公司 四川攀枝花网站建设公司-选我们!四川专业的攀枝花网站制作公司! </div> <div class="fr"> All Rights Reserved 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024097831号-1</a> </div> </div> </div> </footer> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>