Home >Web Front-end >HTML Tutorial >《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose

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

WBOYOriginal: 2016-06-21 08:51:411500browse

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>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Viewport 单位: vw, vh, vmin, vmax_html/css_WEB-ITnose" href="https://m.php.cn/faq/235368.html">Viewport 单位: vw, vh, vmin, vmax_html/css_WEB-ITnose</a></span><span>Next article：<a class="dBlack" title="Bootstrap使用心得之文本_html/css_WEB-ITnose" href="https://m.php.cn/faq/235376.html">Bootstrap使用心得之文本_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</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/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</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>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/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>