首页 >web前端 >html教程 >《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose

《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose

WBOY原创: 2016-06-21 08:51:411501浏览

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把一份文档表示为一棵树（数学意义上的概念）示例代码

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <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>、<h1>、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。

如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确

4、节点

节点（node）属于网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况，文档是由节点构成的集合。

元素节点
文本节点
属性节点

4、1元素节点

DOM的原子是元素节点（element node）诸如

、

、之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是元素，它是我们的节点树的根元素。

4、2文本节点

在上述例子中，

元素包含着文本“don't forget to buy this stuff.”它就是一个文本节点（text node）。

4、3属性节点

属性节点是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，我们可以利用这个属性对包含在元素里的东西做出准确的描述：

<p title="a gentle reminder">Don't forget to buy this stuff.<p>

在DOM中title="a gentle reminder"是一个属性节点（attribute node），在前面的例子中无序清单元素

有class属性。

三者之间的关系.png

4、4 CSS

类似javascript脚本，我们也可以将CSS样式嵌在文档

部分（style>标签之间）。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式：

<link type="text/css" href="file.css" rel="stylesheet">

继承（inheritance)是CSS技术中的一项强大功能。1)、 class属性

<p class="special">This pargraph has the special class<p><h2 class="special">So dose this headline</h2>

在样式表里可以为上面的代码进行定义

special{font-style: italic;}

还可以这样定义

h2.special{text-transform: uppercase;}

2)、id属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符：

<ul id="purchases">

样式表定义

#purchases{border:1px solid white;background-color：#333;color：#ccc;padding:1em;}

#purchases li{font-weight:bold;}

4、5获取元素

有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名和通过类名字来获取

getElementById
getElementsByTagName
getElementsByClassName

1)getElementById

此方法将返回一个与那个有着给定id属性值的元素节点对应的对象，在javascript里注意大小写。它是document对象特有的函数，在脚本代码里，函数名的后面必须跟有一对圆括号，这对圆括号包含这函数的参数。document.getElementById(id)在getElementById方法中只有一个参数：你想获得的那个元素的id属性的值，这个id属性必须放在单引号或双引号里。docment.getElementById("purchases")这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTLM id属性值是purchases

          Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <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操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。</pre>   <p>验证可得是一个对象</p>   <h3>2)getElementsByTagName</h3>   <p>getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字：decument.getElementByTagName(tag)</p>   <pre class="sycode" name="code">alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为：3</pre>   <pre class="sycode" name="code"><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <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”。</pre>   <p>getElementsByTagName允许把一个通配符作为它的参数，通配符（*）必须放在引号里</p>   <pre class="sycode" name="code">alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点</pre>   <pre class="sycode" name="code">var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果，items数组将只包含id属性值是purshase的元素清单的元素</pre>   <h3>3)getElementByClassName</h3>   <p>这个方法让我们能够通过class属性中的类名来访问元素，getElementByClassName也只接受一个参数，就是类名：</p>   <pre class="sycode" name="code">getElementByClassName(class)</pre>   <p>这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组。</p>   <pre class="sycode" name="code">document.getElementsByClassName("sale")</pre>   <p>利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可</p>   <pre class="sycode" name="code">alert(document.getElementsByClassName("important sale").length);//对话框显示1，表示只有一个元素匹配。类名的顺序不重要，就算元素还带有更多类名也没有关系。</pre>   <p>也可以和getElementById组合使用</p>   <pre class="sycode" name="code">     var shopping=document.getElementById("purchase");     var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。</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；    }}</pre>   <h4>5 获取和设置属性</h4>   <ul>       <li>
<strong>getAttribute方法</strong>(获取元素的属性)</li>    <li>
<strong>setAttribute方法</strong>(更改属性节点值)5、1getAttributegetAttribute是一个函数，它只有一个参数(你所要查询的属性的名称)</li>   </ul>   </li>
</ul></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="Viewport 单位: vw, vh, vmin, vmax_html/css_WEB-ITnose" href="https://m.php.cn/zh/faq/235368.html">Viewport 单位: vw, vh, vmin, vmax_html/css_WEB-ITnose</a></span><span>下一篇：<a class="dBlack" title="Bootstrap使用心得之文本_html/css_WEB-ITnose" href="https://m.php.cn/zh/faq/235376.html">Bootstrap使用心得之文本_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><em><a href="https://m.php.cn/zh/article.html" class="bBlack"><i>查看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/zh/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益在线PHP培训，帮助PHP学习者快速成长！</p></div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>