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节点树

(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/otherpica42/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/otherpica42/41202.jpg" alt="html中dom指的是什么"></p><p>示例2:</p><p>获取内容时,只会获取文本内容。</p><p><img src="/upload/otherpica42/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/otherpica42/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/otherpica42/41205.jpg" alt="html中dom指的是什么"></p><p>示例:</p><p><img src="/upload/otherpica42/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/otherpica42/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/otherpica42/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://gydahua.com/article/iehsgg.html">http://gydahua.com/article/iehsgg.html</a>
</div>
<div class="view-qrocde cl">
<div class="m z"><img src="/Public/Home/images/ew.jpg"/></div>
<div class="text">
<h6>扫二维码与项目经理沟通</h6>
<p>我们在微信上24小时期待你的声音</p>
<p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p>
</div>
</div>
<div class="othernews cl">
<h3>其他资讯</h3>
<ul>
<li><a href="/article/ihchei.html">mysql数据库查看表结构的方法</a></li><li><a href="/article/ihchij.html">什么是python函数的返回值</a></li><li><a href="/article/ihcppi.html">VUE实现可随意拖动的弹窗组件</a></li><li><a href="/article/ihchcg.html">实用的Python技巧有哪些</a></li><li><a href="/article/ihcpsd.html">学Python可以开发哪些程序</a></li> </ul>
</div>
</div>
</div>
<div class="sidebar">
<div class="tuijian">
<a href="#">
<h2 class="cl"><span>行业动态</span></h2>
<h3>企业网站建设的重要性!</h3>
<p>现在虽然是移动互联网时代,但企业网站依然重要,包含PC站点,移动站。可以说企业网站关系企业的未来发展和前途,尤其对中小企业更是如此,一些中小企业老板,对自己的名片很在乎,因为这是个门面。...</p>
</a>
</div>
<div class="ser sidesub">
<h2>服务项目</h2>
<ul class="ebox">
<li class="sub sub-1">
<div>
<h3>网站建设</h3>
<p></p>
<a class="btn" href="/serve/website/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>移动端/APP</h3>
<p></p>
<a class="btn" href="/serve/moblie/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>微信/小程序</h3>
<p></p>
<a class="btn" href="/serve/small/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>技术支持</h3>
<p></p>
<a class="btn" href="/serve/tech/">查看详情</a>
</div>
</li>
<li class="sub sub-1">
<div>
<h3>其它服务</h3>
<p></p>
<a class="btn" href="/serve/othe/">查看详情</a>
</div>
</li>
<li class="sub sub-5">
<div>
<h3>更多服务项目</h3>
<p> <a>用我们的专业和诚信赢得您的信赖,从PC到移动互联网均有您想要的服务!</a></p>
<a class="btn" href="/serve/">获取更多</a>
</div>
</li>
</ul>
</div>
<div class="contact" id="fix">
<h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2>
<h3>电话:13518219792</h3>
<p>如遇占线或暂未接听请拨:136xxx98888</p>
<div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div>
</div>
</div>
<script>
//固定滚动
(function () {
var oDiv = document.getElementById("fix");
var H = 120,
iE6;
var Y = oDiv;
while (Y) {
H += Y.offsetTop;
Y = Y.offsetParent
};
iE6 = window.ActiveXObject && !window.XMLHttpRequest;
if (!iE6) {
window.onscroll = function ()
{
var s = document.body.scrollTop || document.documentElement.scrollTop;
if (s > H) {
oDiv.className = "contact fixed";
if (iE6) {
oDiv.style.top = (s - H) + "px";
}
} else {
oDiv.className = "contact ";
}
};
}
})();
</script>
</div>
<div class="footer">
<div class="wp">
<div class="wpss cl">
<dl class="about">
<dt>网站设计</dt>
<dd><a href="http://www.cxjianzhan.cn/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://chengdu.cdcxhl.cn/qiye/" target="_blank" title="企业网站设计">企业网站设计</a></dd><dd><a href="https://www.cdcxhl.com/xiangyingshi.html" target="_blank" title="响应式网站设计">响应式网站设计</a></dd><dd><a href="http://www.cdkjz.cn/" target="_blank" title="高端网站设计">高端网站设计</a></dd> </dl>
<dl class="about">
<dt>网站制作</dt>
<dd><a href="http://www.cxjianzhan.com/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://chengdu.cdcxhl.cn/qiye/" target="_blank" title="企业网站制作">企业网站制作</a></dd><dd><a href="http://chengdu.cdxwcx.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="https://www.cdcxhl.com/zhizuo/chengdu.html" target="_blank" title="四川成都网站制作">四川成都网站制作</a></dd> </dl>
<dl class="contact">
<dt>联系我们</dt>
<dd>电话:13518219792</dd>
<dd>邮箱:631063699@qq.com</dd>
<dd>地址:成都青羊区锦天国际1002号</dd>
<dd>网址:www.gydahua.com</dd>
</dl>
<dl class="about" style="margin-left:50px;width:235px;">
<dt>网站建设</dt>
<dd><a href="http://chengdu.cdcxhl.cn/" target="_blank" title="成都网站建设">成都网站建设</a></dd><dd><a href="http://www.cqcxhl.com/service/ds.html" target="_blank" title="重庆电商网站建设">重庆电商网站建设</a></dd><dd><a href="http://www.cdkjz.cn/wangzhan/qiye/" target="_blank" title="成都企业网站建设">成都企业网站建设</a></dd><dd><a href="https://www.cdxwcx.com/wangzhan/gaiban.html" target="_blank" title="网站建设改版">网站建设改版</a></dd> <!--成都网站建设 成都网站制作 成都做网站 网站建设公司-->
</dl>
<dl class="flow">
<dt></dt>
<div class="ma cl">
<div class="m"> <img src="/Public/Home/images/ew.jpg" />
<p>微信二维码</p>
</div>
</div>
</dl>
</div>
</div>
<div class="footer-link wp">
<ul class="wpss cl">
<li class="fisrt">友情链接</li>
<li><a href="http://www.scgaoxian.com/" title="scgaoxian.com" target="_blank">scgaoxian.com</a></li><li><a href="https://www.cdxwcx.com/city/jiangyou/" title="江油网站建设" target="_blank">江油网站建设</a></li><li><a href="http://www.ghfdjzy.com/" title="贝锐智能" target="_blank">贝锐智能</a></li><li><a href="http://www.snfdjwx.com/" title="成都企业注册服务" target="_blank">成都企业注册服务</a></li><li><a href="http://www.ghjinhua.cn/" title="广汉锦华建材" target="_blank">广汉锦华建材</a></li><li><a href="http://www.cdxwcx.cn/tuoguan/dazhou.html" title="达州托管服务器" target="_blank">达州托管服务器</a></li><li><a href="http://www.cxhljz.cn/app/" title="Android开发" target="_blank">Android开发</a></li><li><a href="http://www.lqfdjxw.com/" title="龙泉发电机维修" target="_blank">龙泉发电机维修</a></li><li><a href="http://www.cdhuace.com/pinpai.html" title="广告品牌策划设计" target="_blank">广告品牌策划设计</a></li><li><a href="http://www.cdkjz.cn/fangan/zhongbiao/" title="奢侈品网站建设方案" target="_blank">奢侈品网站建设方案</a></li> </ul>
</div>
</div>
<div class="bot-footer">
<div class="wp">
<p class="wpss"> <em>Copyright © 2002-2023 www.gydahua.com 快上网建站品牌 QQ:244261566 版权所有</em> <em>备案号:<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em>
</p>
<p class="wpss" style="line-height:30px !important;"> </p>
</div>
</div>
<div class="footer-kefu">
<ul>
<li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a>
</li>
<li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li>
<li class="wx"> <em></em>
<div class="code"> <img src="/Public/Home/images/ew.jpg" />
<p>微信二维码</p>
</div>
</li>
<li class="m"> <em></em>
<div class="code"> <img src="/Public/Home/images/ew.jpg" />
<p>移动版官网</p>
</div>
</li>
<li class="top"><em></em></li>
</ul>
</div>
<script src="/Public/Home/js/all.js"></script>
</body>
</html>
<script>
$(".cont 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>