1、文档：DOM中的“D”
"D"代表document(文档)
2、对象：DOM中的“O”
“O”代表object(对象) 对象的分类
- 用户定义对象(user-defined object)
- 内建对象(native object)
- 宿主对象(host object)
window对象window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（浏览器对象模型）BOM提供了window.open和window.blur等方法。以至于被滥用于各种弹出窗口和下拉菜单
3、模型：DOM中的“M”
“M”代表“Model”（模型）DOM把一份文档表示为一棵树（数学意义上的概念）示例代码
Shoping List<title> </head> <body> <h2>What to buy</h2> <p title="a gentle reminder">Don’t forget to buy this stuff.<p> <ul id="purchases"> <li> A tin of beans<li> <li class="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <body> </html>代码中<html>相当于树根，即根元素。<head>和<body>属于下一个分支，位于同一层次且互不包含，属于兄弟关系。<head>元素有两个子元素<meta>和<title>(属于兄弟关系)<body>元素有三个子元素<p>、<h2>、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。</script></pre> <p>如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述DOM。但我觉得称为<strong>“节点树”</strong>更准确</p> <h2>4、节点</h2> <p>节点（node）属于网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。<strong>DOM</strong>也是同样的情况，文档是由节点构成的集合。</p> <ul> <li>元素节点</li> <li>文本节点</li> <li>属性节点</li> </ul> <h4>4、1元素节点</h4> <p>DOM的原子是<strong>元素节点（element node）</strong>诸如<body>、<p>、<ui>之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是<html>元素，它是我们的节点树的根元素。</p> <h4>4、2文本节点</h4> <p>在上述例子中，<p>元素包含着文本“don't forget to buy this stuff.”它就是一个<strong>文本节点（text node）。</strong></p> <h4>4、3属性节点</h4> <p>属性节点是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，我们可以利用这个属性对包含在元素里的东西做出准确的描述：</p> <pre class="sycode" name="code"><p title="a gentle reminder">Don't forget to buy this stuff.<p></script></pre> <p>在DOM中title="a gentle reminder"是一个<strong>属性节点（attribute node）</strong>，在前面的例子中无序清单元素<ul>有个id属性。有些清单元素<li>有class属性。</p> <p> <p> 三者之间的关系.png </p> </p> <h4>4、4 CSS</h4> <p>类似javascript脚本，我们也可以将CSS样式嵌在文档<head>部分（style>标签之间）。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式： </p> <pre class="sycode" name="code"></script></pre> <p><strong>继承（inheritance)</strong>是CSS技术中的一项强大功能。1)、 class属性</p> <pre class="sycode" name="code"><p class="special">This pargraph has the special class<p><h2 class="special">So dose this headline</h2></script></pre> <p>在样式表里可以为上面的代码进行定义</p> <pre class="sycode" name="code">special{font-style: italic;}</script></pre> <p>还可以这样定义</p> <pre class="sycode" name="code">h2.special{text-transform: uppercase;}</script></pre> <p>2)、id属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符：</p> <pre class="sycode" name="code"><ul id="purchases"></script></pre> <p>样式表定义</p> <pre class="sycode" name="code">#purchases{border:1px solid white;background-color：#333;color：#ccc;padding:1em;}</script></pre> <pre class="sycode" name="code">#purchases li{font-weight:bold;}</script></pre> <h4>4、5获取元素</h4> <blockquote> <p>有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名和通过类名字来获取</p> </blockquote> <ul> <li><strong>getElementById</strong></li> <li><strong>getElementsByTagName</strong></li> <li><strong>getElementsByClassName</strong></li> </ul> <h3>1)getElementById</h3> <p>此方法将返回一个与那个有着给定id属性值的元素节点对应的对象，<strong>在javascript里注意大小写</strong>。它是document对象特有的函数，在脚本代码里，函数名的后面必须跟有<strong>一对圆括号</strong>，这对圆括号包含这<strong>函数的参数。</strong>document.getElementById(id)在getElementById方法中只有一个参数：<strong>你想获得的那个元素的id属性的值，</strong>这个id属性必须放在单引号或双引号里。docment.getElementById("purchases")这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTLM id属性值是purchases</p> <pre class="sycode" name="code"><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Shoping List<title> </head> <body> <h2>What to buy</h2> <p title="a gentle reminder">Don’t forget to buy this stuff.<p> <ul id="purchases"> <li> A tin of beans<li> <li class="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <script> alert(typeof docment.getElementById("purchases")); </ script> <body> </html>//利用`typeof`操作符进行验证（typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。</script></pre> <p>验证可得是一个对象</p> <h3>2)getElementsByTagName</h3> <p>getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字：decument.getElementByTagName(tag)</p> <pre class="sycode" name="code">alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为：3</script></pre> <pre class="sycode" name="code"><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Shoping List<title> </head> <body> <h2>What to buy</h2> <p title="a gentle reminder">Don’t forget to buy this stuff.<p> <ul id="purchases"> <li> A tin of beans<li> <li class="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <script> var items=document.getElementByTagName("li"); for (var i=0; i<items.length;i++){ alert(typeof items[i]); } </ script> <body> </html>//代码运行结果显示三个alert对话框，显示的消息都是“object”。</script></pre> <p>getElementsByTagName允许把一个通配符作为它的参数，通配符（*）必须放在引号里</p> <pre class="sycode" name="code">alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点</script></pre> <pre class="sycode" name="code">var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果，items数组将只包含id属性值是purshase的元素清单的元素</script></pre> <h3>3)getElementByClassName</h3> <p>这个方法让我们能够通过class属性中的类名来访问元素，getElementByClassName也只接受一个参数，就是类名：</p> <pre class="sycode" name="code">getElementByClassName(class)</script></pre> <p>这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组。</p> <pre class="sycode" name="code">document.getElementsByClassName("sale")</script></pre> <p>利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可</p> <pre class="sycode" name="code">alert(document.getElementsByClassName("important sale").length);//对话框显示1，表示只有一个元素匹配。类名的顺序不重要，就算元素还带有更多类名也没有关系。</script></pre> <p>也可以和getElementById组合使用</p> <pre class="sycode" name="code"> var shopping=document.getElementById("purchase"); var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。</script></pre> <p>getElementByClassName方法非常有用，但只有较新的浏览器才支持它。所以，需要使用已有的DOM方法来实现自己的getElementsByClassName。</p> <pre class="sycode" name="code">function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i<elems.length;i++){ if(elems[i].ClassName.indexof(classname)!= -1){results[results.length]=elems[i]; } }return results； }}</script></pre> <h4>5 获取和设置属性</h4> <ul> <li><strong>getAttribute方法</strong>(获取元素的属性)</li> <li><strong>setAttribute方法</strong>(更改属性节点值)5、1getAttributegetAttribute是一个函数，它只有一个参数(你所要查询的属性的名称)</li> </ul> </div> </div> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function(){ layui.code({ elem: 'pre', //默认值为.layui-code about:false, title:'《JavaScriptDOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <footer class="comm-footer"> <ul class="channels"> <li> <a target="_top" href="/system/">操作系统</a> </li><li> <a target="_top" href="/down/">程序下载</a> </li><li> <a target="_top" href="/jquery/">jquery插件库</a> </li><li> <a target="_top" href="/jiaoben/">编程</a> </li><li> <a target="_top" href="/db/">数据库</a> </li><li> <a target="_top" href="/tools/">在线工具</a> </li><li> <a target="_top" href="/framebook/">框架书籍</a> </li><li> <a target="_top" href="/xitongjiaocheng/">系统教程</a> </li><li> <a target="_top" href="/ruanjianxiazai/">软件下载</a> </li> </ul> <ul class="versions"> <li> <a href="https://m.gxlcms.com" class="active">触屏版</a> </li> <li> <a href="https://www.gxlcms.com" target="_top">电脑版</a> </li> </ul> <p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></p> </footer> </body> </html>