一文学「DOM」 - 含案例展示

* 什么是DOM

DOM 是 Document Object Model(文档对象模型)的缩写, 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式;

DOM 标准被分为 3 个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型。
  • XML DOM - 针对 XML 文档的标准模型。定义了所有 XML 元素的对象和属性,以及访问它们的方法
  • HTML DOM - 针对 HTML 文档的标准模型。 定义了所有 HTML 元素的对象和属性,以及访问它们的方法

这里我们只讲HTML DOM。

* HTML DOM 树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:



通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点.

那么,什么是节点?
在 HTML DOM 中,所有事物都是节点。

  • 整个文档就是一个文档节点。 ...
  • 每个HTML元素是元素节点。 ......
    ...
  • HTML元素内部的文本是文本节点 / TextNode。

    hello world

    中的 hello world
  • 每个HTML属性是属性节点。
    中的 class
  • 注释是注释节点。

例子: 你好!,元素节点 ,包含值为 "你好!" 的文本节点。</p> <h3>* HTML DOM 对象 - 方法和属性</h3> <blockquote> <p><strong>方法</strong> 是我们可以在节点上执行的动作(比如添加或修改元素),<strong>属性</strong> 是我们能够获取或设置的值(比如节点的名称或内容)。</p> </blockquote> <p><em>常用的 HTML DOM 方法:</em></p> <ul> <li> <strong>getElementById(id)</strong> - 获取带有指定 id 的节点(元素) <code>var ele = document.getElementById("eleId");</code> </li> <li> <strong>appendChild(node)</strong> - 插入新的子节点(元素)<code>ele.appendChild(sub);</code> </li> <li> <strong>removeChild(node)</strong> - 删除指定的子节点(元素)<code>ele.removeChild(sub);</code> </li> <li> <strong>insertBefore(node)</strong> - 在指定的子节点前面插入新的子节点(元素);相对兄弟元素定位</li> <li> <strong>getAttribute("id")</strong> - 返回指定的属性值 <code>ele.getAttribute("id");</code> </li> <li> <strong>setAttribute("id")</strong> - 把指定属性设置或修改为指定的值 <code>ele.setAttribute("disabled") = "true";</code> </li> </ul> <hr> <ul> <li> <strong>getElementsByTagName()</strong> - 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)</li> <li> <strong>getElementsByClassName()</strong> - 返回包含带有指定类名的所有元素的节点列表</li> <li> <strong>replaceChild()</strong> - 替换子节点</li> <li> <strong>createAttribute()</strong> - 创建属性节点;为一个元素增加一个属性</li> <li> <strong>createElement()</strong> - 创建元素节点</li> <li> <strong>createTextNode()</strong> - 创建文本节点</li> </ul> <p><em>常用的HTML DOM属性:</em></p> <ul> <li> <strong>innerHTML</strong> - 节点(元素)的文本值 <code>var text = ele.innerHTML</code> </li> <li> <strong>parentNode</strong> - 节点(元素)的父节点 <code>var eleParent = ele.parentNode</code> 父节点只有一个,没有s</li> <li> <strong>childNodes</strong> - 节点(元素)的子节点 <code>var eleChild = ele.childNodes</code> 子节点有可能有多个,带s</li> <li> <strong>attributes</strong> - 节点(元素)的属性节点 <code>var attr - ele.attributes</code> 获取dom属性列表</li> </ul> <p><strong>我做了实验,发现非常有意思的信息:</strong><br> <em>html代码</em></p> <pre><code class="javascript"><div class="box" id="box"> <div class="main" id="main"></div> <div class="sub" id="sub">nihao</div> </div> </code></pre> <p><em>css代码</em></p> <pre><code class="css">* {margin: 0px; padding: 0px;} .box { width: 300px; height: 300px; background-color: #c688e3; margin: 0 auto; position: relative; } .main { width: 100px; height: 100px; margin: 0 auto; background: #40cfee; } .sub { width: 100px; height: 100px; margin-top: 100px; position: absolute; background-color: pink; } </code></pre> <p><em>javascript代码</em></p> <pre><code class="javascript">var box = document.getElementById("box"); var main = document.getElementById("main"); var sub = document.getElementById("sub"); // main.appendChild(sub); // main.removeChild(sub); console.dir(box.childNodes); // console.dir(sub.attributes); </code></pre> <p><em>效果图</em></p> <div class="image-package"> <div class="image-container" style="max-width: 368px; max-height: 320px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ca926e4512e8499192f3715328bcad7e.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ca926e4512e8499192f3715328bcad7e.png" width="368" height="320" alt="一文学「DOM」 - 含案例展示_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 原始效果 </div> </div> <p><code>main</code>和<code>sub</code>在<code>box</code>包含框中按文档普通流规则正常显示。</p> <div class="image-package"> <div class="image-container" style="max-width: 368px; max-height: 325px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/3f918bf0ea9740c7ab8662b35f483b1f.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/3f918bf0ea9740c7ab8662b35f483b1f.png" width="368" height="325" alt="一文学「DOM」 - 含案例展示_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> main.appendChild(sub)效果 </div> </div> <p><code>sub</code>被<code>appendChild</code>到<code>main</code>内部,作为<code>main</code>的子元素而存在。注意,此时<code>sub</code>是在文档普通流中提出来之后加入到<code>main</code>中的,作为<code>main</code>的兄弟节点的sub已经被提走了。</p> <div class="image-package"> <div class="image-container" style="max-width: 359px; max-height: 321px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/6943b5bfeb4040eaaffe3bdf1fd722ce.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/6943b5bfeb4040eaaffe3bdf1fd722ce.png" width="359" height="321" alt="一文学「DOM」 - 含案例展示_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 先appendChild后又removeChild的效果 </div> </div> <p>可以看到,<code>sub</code>节点没了,虽然他作为子元素本身存在与在<code>box</code>包含框中,但经过<code>appendChild</code>和<code>removeChild</code>之后,该节点已经被删除。</p> <div class="image-package"> <div class="image-container" style="max-width: 269px; max-height: 165px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/bdd15943d01c41fe878bd1908720fecc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/bdd15943d01c41fe878bd1908720fecc.jpg" width="269" height="165" alt="一文学「DOM」 - 含案例展示_第4张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 原始状态打印box.childNodes </div> </div> <p>惊了,居然<code>length</code>为5!为什么长度为5?细细看来发现,第<code>0/2/4</code>都为<code>text</code>,并且打开看发现值是 <strong>回车键</strong>,明白了吧,原因就是我们在编程时习惯给格式化,对代码进行换行显示,这个换行符其实就是个不可见文本,<code>dom</code>会将其当做子元素了,所以长度为5。所以平时我们在使用的时候一定要注意,并且也可以用这种方式获取文本内容。</p> <div class="image-package"> <div class="image-container" style="max-width: 271px; max-height: 113px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/8a1f61849b9a48d48dd8f141753c28b2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/8a1f61849b9a48d48dd8f141753c28b2.jpg" width="271" height="113" alt="一文学「DOM」 - 含案例展示_第5张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 原始状态打印box.attributes </div> </div> <p>这个没什么问题,就是正常的将属性抓取出来,放到一个数组当中而已。</p> <h4>innerHtml属性</h4> <p><code>innerHTML</code> 属性对于获取或替换 HTML 元素的内容(文本节点)<br> <em>html代码</em></p> <pre><code class="javascript"><html> <body> <p id="intro">Hello World!</p> </body> </html> </code></pre> <p><em>css代码</em></p> <pre><code class="css">#intro { display: none; } </code></pre> <p><em>javascript代码</em></p> <pre><code class="javascript">var txt=document.getElementById("intro").innerHTML; document.write(txt); </code></pre> <p><em>效果展示</em><br> </p> <div class="image-package"> <div class="image-container" style="max-width: 271px; max-height: 66px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/6b73322ab83040ca8e282601a5a9e171.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/6b73322ab83040ca8e282601a5a9e171.jpg" width="271" height="66"></a> </div> </div> <div class="image-caption"> 利用document.write()在页面上打印出文本节点 </div> </div> <br> 将javascript代码改一下,如下 <br> <em>javascript代码</em> <p></p> <pre><code class="javascript">document.getElementById("intro").innerHTML = "haha, is me"; var txt=document.getElementById("intro").innerHTML document.write(txt) </code></pre> <p><em>效果展示</em></p> <div class="image-package"> <div class="image-container" style="max-width: 196px; max-height: 48px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/3c0fe169da074186b0273023477a92d0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/3c0fe169da074186b0273023477a92d0.jpg" width="196" height="48"></a> </div> </div> <div class="image-caption"> 通过innerHTML修改了文本节点 </div> </div> <h4>nodeName属性</h4> <p><code>nodeName</code> 属性规定节点的名称,并且,<code>nodeName</code> 始终包含 HTML 元素的大写字母标签名</p> <ul> <li><strong>nodeName 是只读的</strong></li> <li><strong>元素节点的 nodeName 与标签名相同</strong></li> <li><strong>属性节点的 nodeName 与属性名相同</strong></li> <li><strong>文本节点的 nodeName 始终是 #text</strong></li> <li><strong>文档节点的 nodeName 始终是 #document</strong></li> </ul> <h4>nodeValue 属性</h4> <p><code>nodeValue</code> 属性规定节点的值<br> -<strong>元素节点的 nodeValue 是 undefined 或 null</strong><br> -<strong>文本节点的 nodeValue 是文本本身</strong><br> -<strong>属性节点的 nodeValue 是属性值</strong> <code>document.getElementById("main").nodeValue</code> 输出 null<br> <em>html代码</em></p> <pre><code class="javascript"><html> <body> <p id="intro">Hello World!</p> </body> </html> </code></pre> <p><em>css代码</em></p> <pre><code class="css">#intro { display: none; } </code></pre> <p><em>js代码</em></p> <pre><code class="javascript">var txt = document.getElementById('intro').nodeValue; var f = txt == undefined document.write(f) </code></pre> <p><em>效果展示</em></p> <div class="image-package"> <div class="image-container" style="max-width: 168px; max-height: 51px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/3fbaad47f4c94027b711dcb8e71ebd58.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/3fbaad47f4c94027b711dcb8e71ebd58.png" width="168" height="51"></a> </div> </div> <div class="image-caption"> 页面打印出 true </div> </div> <p><em>页面代码</em></p> <pre><code class="javascript"><html> <body> <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html> </code></pre> <p><em>输出</em></p> <div class="image-package"> <div class="image-container" style="max-width: 284px; max-height: 101px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/40fa556c81f747dea1527ef70d832b6a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/40fa556c81f747dea1527ef70d832b6a.jpg" width="284" height="101" alt="一文学「DOM」 - 含案例展示_第6张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 通过firstChild属性找到第一个子节点,这里是个文本节点 </div> </div> <h4>nodeType 属性</h4> <p>nodeType 属性返回节点的类型,在我们爬数据的时候可能会用到。重要的有以下几种:</p> <table> <thead> <tr> <th>元素类型</th> <th style="text-align:center">nodeType</th> </tr> </thead> <tbody> <tr> <td>元素</td> <td style="text-align:center">1</td> </tr> <tr> <td>属性</td> <td style="text-align:center">2</td> </tr> <tr> <td>文本</td> <td style="text-align:center">3</td> </tr> <tr> <td>注释</td> <td style="text-align:center">8</td> </tr> <tr> <td>文档</td> <td style="text-align:center">9</td> </tr> </tbody> </table> <h3>* HTML DOM 访问</h3> <p>访问HTML元素,就是访问HTML 节点,三种方法:</p> <ul> <li> <strong>getElementById() 方法</strong> <code>document.getElementById("intro");</code> 返回带有指定 ID 的元素</li> <li> <strong>getElementsByTagName() 方法</strong> <code>document.getElementsByTagName("p");</code>返回带有指定标签名的<strong>所有</strong>元素</li> <li> <strong>getElementsByClassName() 方法</strong> <code>document.getElementsByClassName("intro");</code>返回带有相同类名的**所有 **HTML 元素<br> <em>getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。</em> </li> </ul> <h3>* HTML DOM 修改</h3> <p>修改 HTML DOM 意味着许多不同的方面</p> <ul> <li> <strong>改变 HTML 内容</strong> <code>document.getElementById("p1").innerHTML="New text!";</code>改变一个 <p> 元素的 HTML 内容</li> <li> <strong>改变 CSS 样式</strong> <code>document.getElementById("p2").style.color="blue";</code>改变一个<p>元素 文字的颜色</li> <li><strong>改变 HTML 属性</strong></li> <li> <strong>创建新的 HTML 元素</strong> <code>见下方</code> </li> <li> <strong>替换已有的 HTML 元素</strong> ```见下方``</li> <li><strong>删除已有的 HTML 元素</strong></li> <li> <strong>改变事件(处理程序)</strong> <code>见下方</code> </li> </ul> <p><em><strong>创建新的 HTML 元素(1)</strong></em><br> 如需向 HTML DOM 添加新元素,<strong>您首先必须创建该元素(元素节点)</strong>,然后把它追加到已有的元素上。</p> <p><em>html代码</em></p> <pre><code class="javascript"><div id="d1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> </code></pre> <p><em>javascript代码</em></p> <pre><code class="javascript">var para=document.createElement("p"); // 创建<p>元素节点 var node=document.createTextNode("This is new."); // 给空的<p>元素节点增加文本节点"this is new" para.appendChild(node); // 生成带有文本子节点的<p>元素节点 var element=document.getElementById("d1"); element.appendChild(para); // 追加<p>元素节点到d1中 </code></pre> <p><em>页面展示</em></p> <div class="image-package"> <div class="image-container" style="max-width: 263px; max-height: 107px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/d6d3e0d5d02b40e39599cd37fa8f95a4.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/d6d3e0d5d02b40e39599cd37fa8f95a4.png" width="263" height="107" alt="一文学「DOM」 - 含案例展示_第7张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 新的p元素已经被成功插入 </div> </div> <p>上面的代码是将新元素添加到最后一个子节点后面的,如果我们不希望如此,也可以用insertBefore() 实现;</p> <p><em><strong>创建新的 HTML 元素(2)</strong></em><br> 这里涉及到三个元素节点,父元素,新元素和某个兄弟元素。<br> <em>html代码</em></p> <pre><code class="javascript"><div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> </code></pre> <p><em>javascript代码</em></p> <pre><code class="javascript">var para=document.createElement("p"); // 创建<p>元素节点 var node=document.createTextNode("This is new."); // 给空的<p>元素节点增加文本节点"this is new" para.appendChild(node); // 生成带有文本子节点的<p>元素节点 var element=document.getElementById("div1"); // 查找父节点的元素节点 var child=document.getElementById("p1"); // 查找插入位置的元素节点 element.insertBefore(para,child); // 将para元素节点插入child元素节点之前 </code></pre> <p><em><strong>替换 HTML 元素<code>replaceChild()</code></strong></em></p> <p><em>html代码</em></p> <pre><code class="javascript"><div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> </code></pre> <p><em>javascript代码</em></p> <pre><code class="javascript">var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.replaceChild(para,child); // 使用replaceChild()替换 </code></pre> <hr> <p><em><strong>使用事件修改dom元素</strong></em></p> <p>HTML DOM 允许您在事件发生时执行代码;当 HTML 元素”有事情发生“时,浏览器就会生成事件:</p> <ul> <li>在元素上点击</li> <li>加载页面</li> <li>改变输入字段</li> </ul> <p><em>html代码</em></p> <pre><code class="javascript"><html> <body> <input type="button" onclick="ChangeBackground()" value="Change background color" /> </body> </html> </code></pre> <p><em>js代码</em></p> <pre><code class="javascript">function ChangeBackground() { document.body.style.backgroundColor="lavender"; } </code></pre> <p><em>效果展示</em><br> </p> <div class="image-package"> <div class="image-container" style="max-width: 376px; max-height: 125px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/b987aafdfd1545ca9f410dc17430b254.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/b987aafdfd1545ca9f410dc17430b254.jpg" width="376" height="125" alt="一文学「DOM」 - 含案例展示_第8张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> 点击修改背景颜色 </div> </div> <p></p> <h3>* HTML DOM 事件</h3> <p>HTML DOM 允许 JavaScript 对 HTML 事件作出反应,当事件发生时,可以执行 JavaScript。<br> HTML 事件的例子:</p> <ul> <li> <strong>当用户点击鼠标时</strong> <code>onclick="doIt()"</code>;鼠标按下<code>onmousedown</code>;鼠标弹起<code>onmouseup</code>。首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件</li> <li> <strong>当网页已加载时</strong> <code>onload="doIt()"</code>;离开网页时使用 <code>onunload="doIt()"</code>;<code>onload</code> 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。<em><code>onload</code> 和 <code>onunload</code> 事件可用于处理 <code>cookies</code></em> </li> <li><strong>当图片已加载时</strong></li> <li> <strong>当鼠标移动到元素上时</strong> <code>onmouseover=”doIt()“</code>;鼠标移开<code>onmouseout=”doIt()“</code> </li> <li> <strong>当输入字段被改变时</strong> <code>onchange="doIt()"</code> 常用于输入字段的监控,验证。</li> <li><strong>当 HTML 表单被提交时</strong></li> <li><strong>当用户触发按键时</strong></li> </ul> <p><strong>我们也可以使用 HTML DOM 来分配事件:</strong><br> 该例为 button 元素分配 onclick 事件:<br> <em>javascript代码</em></p> <pre><code class="javascript">document.getElementById("myBtn").onclick=function(){ displayDate() }; </code></pre> <p><strong>用onload来处理cookies</strong><br> <em>html代码</em></p> <pre><code class="javascript"><html> <body onload="checkCookies()"> <p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p> </body> </html> </code></pre> <p><em>javascript代码</em></p> <pre><code class="javascript">function checkCookies() { if (navigator.cookieEnabled==true) { alert("Cookies are enabled") } else { alert("Cookies are not enabled") } } </code></pre> <h3>* HTML DOM - 导航</h3> <h5>1. HTML DOM 节点列表</h5> <p><strong>getElementsByTagName() 方法返回节点列表数组</strong><br> 下面的代码选取文档中的所有 <p> 节点:</p> <pre><code class="javascript">var x=document.getElementsByTagName("p"); </code></pre> <p>可以通过下标号访问这些节点。如需访问<em>第二个 <p></em>,您可以这么写:</p> <pre><code class="javascript">var y=x[1]; // 下标从0开始 </code></pre> <p>length 属性定义节点列表中节点的数量</p> <pre><code class="javascript">var len = x.length </code></pre> <p><em>简单应用:</em> 获取所有 <p> 元素节点,并输出每个 <p> 元素的文本节点的值</p> <pre><code class="javascript">x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />"); } </code></pre> <h5>2. 导航节点关系</h5> <p>您能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。</p> <pre><code class="javascript"><html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示节点关系。</p> </div> </body> </html> </code></pre> <p>观察上述结构</p> <ul> <li>首个 <p> 元素是 <body> 元素的首个子元素(firstChild)<code>firstChild 属性可用于访问元素的文本,前面我们用过</code> </li> <li><div> 元素是 <body> 元素的最后一个子元素(lastChild)</li> <li><body> 元素是首个 <p> 元素和 <div> 元素的父节点(parentNode)</li> </ul> <h5>3. DOM 根节点</h5> <p>这里有两个特殊的属性,可以访问全部文档:</p> <ul> <li><strong>document.documentElement - 全部文档</strong></li> <li> <strong>document.body - 文档的主体</strong> <code>页面的<body>部分</code> </li> </ul> <p><em>html代码</em></p> <pre><code class="javascript"><html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示 <b>document.body</b> 属性。</p> </div> </body> </html> </code></pre> <p><em>javascript代码</em></p> <pre><code class="javascript">alert(document.body.innerHTML); </code></pre> <p><em>效果展示</em><br> </p> <div class="image-package"> <div class="image-container" style="max-width: 444px; max-height: 417px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/cff2199059624856bc1788655e713dda.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/cff2199059624856bc1788655e713dda.png" width="444" height="417" alt="一文学「DOM」 - 含案例展示_第9张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> alert弹出内容 </div> </div> <p></p> <h5>4. childNodes 和 nodeValue</h5> <p><em>html代码</em></p> <pre><code class="javascript"><html> <body> <p id="intro">Hello World!</p> </body> </html> </code></pre> <p><em>javascript代码</em></p> <pre><code class="javascript">var txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(txt); </code></pre> <p><em>效果展示</em><br> </p> <div class="image-package"> <div class="image-container" style="max-width: 206px; max-height: 89px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e7b15b06becb424096462877962b94e8.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/e7b15b06becb424096462877962b94e8.png" width="206" height="89"></a> </div> </div> <div class="image-caption"> 页面本身一个 / document.write一个 </div> </div> <p></p> <h3>* 结束语</h3> <p>至此,HTML DOM 内容已经结束,如果理解还不够透彻,你可以猛戳这里查看更多DOM实例</p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1275886071393042432"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(一文学「DOM」 - 含案例展示)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514462770130944.htm" title="斤斤计较的婚姻到底有多难?" target="_blank">斤斤计较的婚姻到底有多难?</a> <span class="text-muted">白心之岂必有为</span> <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多?我都会回答他,一般婚姻出现问题的斤斤计较的人士会非常多,以我多年经验,在婚姻落的一塌糊涂的人当中,斤斤计较的人数占比在20~30%以上,也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中,有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型:第一种是物质上的,另一种是精神上的。在物质与精神上抠门已经严重的影响</div> </li> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> <span class="text-muted">露露_e800</span> <div>今天是家庭关系规划师的第二阶最后一天,慧萍老师帮我做了个案,帮我处理了埋在心底好多年的一份恐惧,并给了我深深的力量!这几天出来学习,爸妈过来婆家帮我带小孩,妈妈出于爱帮我收拾东西,并跟我先生和婆婆产生矛盾,妈妈觉得他们没有照顾好我…。今晚回家见到妈妈,我很欣赏她并赞扬她,妈妈说今晚要跟我睡我说好,当我们俩躺在床上准备睡觉的时候,我握着妈妈的手对她说:妈妈这几天辛苦你了,你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835514335561084928.htm" title="芦花鞋一四" target="_blank">芦花鞋一四</a> <span class="text-muted">许叶晗</span> <div>又是在一个寒冷的夏日里,青铜和葵花决定今天一起去卖芦花鞋,奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧!”于是青铜和葵花喝完了奶奶给她们做的粥,就准备去镇上卖卢花鞋,这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖,用手势表达对葵花说:“这回有好多人在抢我们生意呢!我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫,卖芦花喽!卖芦花</div> </li> <li><a href="/article/1835514307744460800.htm" title="QQ群采集助手,精准引流必备神器" target="_blank">QQ群采集助手,精准引流必备神器</a> <span class="text-muted">2401_87347160</span> <a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具,它通过关键词搜索功能,帮助用户快速找到相关的微信群,并提供筛选是否需要验证的群组的功能。主要功能关键词搜索:用户可以输入关键词,工具将自动查找包含该关键词的微信群。筛选功能:工具提供筛选机制,用户可以选择是否只显示需要验证或不需要验证的群组。精准引流:通过上述功能,用户可以更精准地找到目标群组,进行有效的引流操作。3.设备需求该工具可以</div> </li> <li><a href="/article/1835513803861749760.htm" title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a> <span class="text-muted">ℒℴѵℯ心·动ꦿ໊ོ꫞</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、机器学习概述定义机器学习(MachineLearning,ML)是一种通过数据驱动的方法,利用统计学和计算算法来训练模型,使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本,识别其中的模式和规律,从而对新的数据进行判断。其核心在于通过训练过程,让模型不断优化和提升其预测准确性。主要类型1.监督学习(SupervisedLearning)监督学习是指在训练数据集中包含输入</div> </li> <li><a href="/article/1835513699826233344.htm" title="android系统selinux中添加新属性property" target="_blank">android系统selinux中添加新属性property</a> <span class="text-muted">辉色投像</span> <div>1.定位/android/system/sepolicy/private/property_contexts声明属性开头:persist.charge声明属性类型:u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property</div> </li> <li><a href="/article/1835513701143244800.htm" title="铭刻于星(四十二)" target="_blank">铭刻于星(四十二)</a> <span class="text-muted">随风至</span> <div>69夜晚,绍敏同学做完功课后,看了眼房外,没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深,都有些旧了,想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处,待到全部拆开后,又反复抚平纸张,然后仔细地一字字默看。只是开头的三个字是第一次看到,让她心漏跳了几拍。“亲爱的绍敏:从四年级的时候,我就喜欢你了,但是我一直不敢说,怕影响你学习。六年级的时候听说有人跟你表白,你接受了,我很难过,但</div> </li> <li><a href="/article/1835513570171908096.htm" title="底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说" target="_blank">底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说</a> <span class="text-muted">造命者说</span> <div>底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说我叫吴起,生于公元前440年的战国初期,正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家,是兵家代表人物。评价我一生历仕鲁、魏、楚三国,通晓兵家、法家、儒家三家思想,在内政军事上都有极高的成就。周安王二十一年(公元前381年),因变法得罪守旧贵族,被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭,从年轻时候起就不甘平凡</div> </li> <li><a href="/article/1835513571501502464.htm" title="2020-01-25" target="_blank">2020-01-25</a> <span class="text-muted">晴岚85</span> <div>郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是:你知道想要达成的目标是什么,但却不知道如何才能达成;另一个问题是:你不知道你的目标是什么。前一个是行动的问题,后一个是结果的问题。通过制定具体的下一步行动,可以解决不知道如何开始行动的问题。而通过去想象结果,对结果做预估,可以解决找不着目标的问题。对于所有吸引我们注意力,想要完成的任务,你可以先想象一下,预期的结果究竟是什</div> </li> <li><a href="/article/1835513568917811200.htm" title="随笔 | 仙一般的灵气" target="_blank">随笔 | 仙一般的灵气</a> <span class="text-muted">海思沧海</span> <div>仙岛今天,我看了你全部,似乎已经进入你的世界我不知道,这是否是梦幻,还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求,这样才能够符合人生的梦想,生活才能够充满着阳光与快乐我不知道,我为什么会这样的感叹,是在感叹自己的人生,还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴,每天活在自己的梦中,活在一个不真实的世界是在逃避自己,还是在逃避周围的一切有时候我嘲笑自己,嘲笑自己如此的虚无,</div> </li> <li><a href="/article/1835513567663714304.htm" title="想家" target="_blank">想家</a> <span class="text-muted">爆米花机</span> <div>也许不同于大家对家乡的思念,我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福,我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女,我贪恋家的安逸。刚刚踏出大学校门,初出茅庐,无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气,是无法适应工作的节奏,是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志,选择再次踏上征程。图片发自App</div> </li> <li><a href="/article/1835513551624695808.htm" title="【iOS】MVC设计模式" target="_blank">【iOS】MVC设计模式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>MVC前言如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architecturalpattern),属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构,也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC(控制器)负责协调Model和View,处理大部分逻辑它将数据从Mod</div> </li> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时,遇到了许多需要用到多界面传值的地方,这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值,简单地说就是通过访问后一个视图控制器的属性来为它赋值,通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835513440525971456.htm" title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a> <span class="text-muted">巨木擎天</span> <div>唉!就这么一夜,林子感觉就像过了很多天似的,先是回了阳间家里,遇到了那么多不可思议的事情儿。特别是小伙伴们,第二次与自己见面时,僵硬的表情和恐怖的气氛,让自己如坐针毡,打从心眼里难受!还有东子,他现在还好吗?有没有被人欺负?护城河里的小鱼小虾们,还都在吗?水不会真的干枯了吧?那对相亲相爱漂亮的太平鸟儿,还好吧!春天了,到了做窝、下蛋、喂养小鸟宝宝的时候了,希望它们都能够平安啊!虽然没有看见家人,也</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动(非注册)自动(注册)自定义cellcell的复用在iOS开发中,单元格复用是一种提高表格(UITableView)和集合视图(UICollectionView)滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时,如果没有可复用的单元格,则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕,它就不会被销毁。相反,它被添</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件,它用于显示当前页面的路径,帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中,如果你已经安装了ElementUI,就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例:安装ElementUI(如果你还没有安装的话):你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835512809883004928.htm" title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a> <span class="text-muted">Tracy的小书斋</span> <div>本书的作者是俞敏洪,大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧,也是我事业上的偶像。本日摘录他书中第一章中的金句:『一个人如果什么目标都没有,就会浑浑噩噩,感觉生命中缺少能量。能给我们能量的,是对未来的期待。第一件事,我始终为了进步而努力。与其追寻全世界的骏马,不如种植丰美的草原,到时骏马自然会来。第二件事,我始终有阶段性的目标。什么东西能给我能量?答案是对未来的期待。』读到这里的时候,我便</div> </li> <li><a href="/article/1835512542735200256.htm" title="C语言宏函数" target="_blank">C语言宏函数</a> <span class="text-muted">南林yan</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>一、什么是宏函数?通过宏定义的函数是宏函数。如下,编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<<c<<endl;//800return0;}二、为什么要使用宏函数使用宏函数</div> </li> <li><a href="/article/1835512305320816640.htm" title="地推话术,如何应对地推过程中家长的拒绝" target="_blank">地推话术,如何应对地推过程中家长的拒绝</a> <span class="text-muted">校师学</span> <div>相信校长们在做地推的时候经常遇到这种情况:市场专员反馈家长不接单,咨询师反馈难以邀约这些家长上门,校区地推疲软,招生难。为什么?仅从地推层面分析,一方面因为家长受到的信息轰炸越来越多,对信息越来越“免疫”;而另一方面地推人员的专业能力和营销话术没有提高,无法应对家长的拒绝,对有意向的家长也不知如何跟进,眼睁睁看着家长走远;对于家长的疑问,更不知道如何有技巧地回答,机会白白流失。由于回答没技巧和专业</div> </li> <li><a href="/article/1835512178023690240.htm" title="谢谢你们,爱你们!" target="_blank">谢谢你们,爱你们!</a> <span class="text-muted">鹿游儿</span> <div>昨天家人去泡温泉,二个孩子也带着去,出发前一晚,匆匆下班,赶回家和孩子一起收拾。饭后,我拿出笔和本子(上次去澳门时做手帐的本子)写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考,带什么出发去旅游呢?她在对应的数字旁边画上了,泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后,就让她自己对着这个本子,将要带的,一一带上,没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来,妹妹累得</div> </li> <li><a href="/article/1835511911769272320.htm" title="C语言如何定义宏函数?" target="_blank">C语言如何定义宏函数?</a> <span class="text-muted">小九格物</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>在C语言中,宏函数是通过预处理器定义的,它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为,但它们不是真正的函数,因为它们在编译时不会进行类型检查,也不会分配存储空间。宏函数的定义通常使用#define指令,后面跟着宏的名称和参数列表,以及宏展开后的代码。宏函数的定义方式:1.基本宏函数:这是最简单的宏函数形式,它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div> </li> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn:Python WSGI服务器的基石" target="_blank">理解Gunicorn:Python WSGI服务器的基石</a> <span class="text-muted">范范0825</span> <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn:PythonWSGI服务器的基石介绍Gunicorn,全称GreenUnicorn,是一个为PythonWSGI(WebServerGatewayInterface)应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具,Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置,帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835511669476913152.htm" title="小丽成长记(四十三)" target="_blank">小丽成长记(四十三)</a> <span class="text-muted">玲玲54321</span> <div>小丽发现,即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现,一个接一个的问题,人生就没有停下的时候,小问题不断出现。不过她今天看的书,她接受了人生就是不确定的,厉害的人就是不断创造确定性,在Ta的领域比别人多的确定性就能让自己脱颖而出,显示价值从而获得的比别人多的利益。正是这样的原因,因为从前修炼自己太少,使得她现在在人生道路上打怪起来困难重重,她似乎永远摆脱不了那种无力感,有种习</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识,呵护孩子健康" target="_blank">学点心理知识,呵护孩子健康</a> <span class="text-muted">静候花开_7090</span> <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所,超越教育与技术的思考》的讲座。今天又重新学习了一遍,收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题,她说心理健康的一些基本命题,我们与我们通常的一些教育命题是不同的,她还举了几个例子,让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日,春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日,春蕾教育集团团建活动感受——黄晓丹</a> <span class="text-muted">黄错错加油</span> <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼,也增长了不少知识。2.游戏过程中,我们贡献的是个人力量,展现的是团队的力量。它磨合的往往不止是工作的熟悉,更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上,每个人摆正自己的位置、各司其职充分发挥才能,并团结一致劲往一处使,才能实现最大的成功。新知:1.团队精神需要不断地创新。过去,人们把创新看作是冒风险,现在人们</div> </li> <li><a href="/article/1835511036317364224.htm" title="Cell Insight | 单细胞测序技术又一新发现,可用于HIV-1和Mtb共感染个体诊断" target="_blank">Cell Insight | 单细胞测序技术又一新发现,可用于HIV-1和Mtb共感染个体诊断</a> <span class="text-muted">尐尐呅</span> <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌(Mycobacteriumtuberculosis,Mtb)感染引起,获得性免疫缺陷综合症(艾滋病)由人免疫缺陷病毒(Humanimmunodeficiencyvirustype1,HIV-1)感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队,共同研究得出单细胞测序</div> </li> <li><a href="/article/1835510909070569472.htm" title="瑶池防线" target="_blank">瑶池防线</a> <span class="text-muted">谜影梦蝶</span> <div>冥华虽然逃过了影梦的军队,但他是一个忠臣,他选择上报战况。败给影梦后成逃兵,高层亡尔还活着,七重天失守......随便一条,即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑,但他还选择上报实情,因为责任。同样此信送到仙宫后,知道此事的人,大多数人都认定冥华要完了,所以上到仙界高层,下到扫大街的,包括冥华自己,全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话,冥华必死无疑。然而</div> </li> <li><a href="/article/1835510656011431936.htm" title="爬山后遗症" target="_blank">爬山后遗症</a> <span class="text-muted">璃绛</span> <div>爬山,攀登,一步一步走向制高点,是一种挑战。成功抵达是一种无法言语的快乐,在山顶吹吹风,看看风景,这是从未有过的体验。然而,爬山一时爽,下山腿打颤,颠簸的路,一路向下走,腿部力量不够,走起来抖到不行,停不下来了!第二天必定腿疼,浑身酸痛,坐立难安!</div> </li> <li><a href="/article/1835510025561403392.htm" title="《投行人生》读书笔记" target="_blank">《投行人生》读书笔记</a> <span class="text-muted">小蘑菇的树洞</span> <div>《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅,比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力,更多的是自我意识,你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议,细节,截止日期和数据很重要截止日期,一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好</div> </li> <li><a href="/article/1835509898507546624.htm" title="《策划经理回忆录之二》" target="_blank">《策划经理回忆录之二》</a> <span class="text-muted">路基雅虎</span> <div>话说三年变六年,飘了,飘了……眨眼,2013年5月,老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸,这是一家很有追求,同时敢于尝试的,且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月,到2015年11月,两年的陪伴,迎来了一场大爆发。2000个筹,5万/筹,直接回笼1个亿!!!这……让我开始认真审视这座看似五线</div> </li> <li><a href="/article/101.htm" title="数据采集高并发的架构应用" target="_blank">数据采集高并发的架构应用</a> <span class="text-muted">3golden</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>问题的出发点:          最近公司为了发展需要,要扩大对用户的信息采集,每个用户的采集量估计约2W。如果用户量增加的话,将会大量照成采集量成3W倍的增长,但是又要满足日常业务需要,特别是指令要及时得到响应的频率次数远大于预期。       &n</div> </li> <li><a href="/article/228.htm" title="不停止 MySQL 服务增加从库的两种方式" target="_blank">不停止 MySQL 服务增加从库的两种方式</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a><a class="tag" taget="_blank" href="/search/linux%E6%95%99%E7%A8%8B/1.htm">linux教程</a><a class="tag" taget="_blank" href="/search/linux%E8%87%AA%E5%AD%A6/1.htm">linux自学</a> <div>现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库。前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作。  一般在线增加从库有两种方式,一种是通过mysqldump备份主库,恢复到从库,mysqldump是逻辑备份,数据量大时,备份速度会很慢,锁表的时间也会很长。另一种是通过xtrabacku</div> </li> <li><a href="/article/355.htm" title="Quartz——SimpleTrigger触发器" target="_blank">Quartz——SimpleTrigger触发器</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/SimpleTrigger/1.htm">SimpleTrigger</a><a class="tag" taget="_blank" href="/search/TriggerUtils/1.htm">TriggerUtils</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2208166 一.概述 SimpleTrigger触发器,当且仅需触发一次或者以固定时间间隔周期触发执行;   二.SimpleTrigger的构造函数 SimpleTrigger(String name, String group):通过该构造函数指定Trigger所属组和名称; Simpl</div> </li> <li><a href="/article/482.htm" title="Informatica应用(1)" target="_blank">Informatica应用(1)</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/lookup/1.htm">lookup</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6/1.htm">组件</a><a class="tag" taget="_blank" href="/search/Informatica/1.htm">Informatica</a> <div>1.如果要在workflow中调用shell脚本有一个command组件,在里面设置shell的路径;调度wf可以右键出现schedule,现在用的是HP的tidal调度wf的执行。 2.designer里面的router类似于SSIS中的broadcast(多播组件);Reset_Workflow_Var:参数重置 (比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要</div> </li> <li><a href="/article/609.htm" title="python 获取图片验证码中文字" target="_blank">python 获取图片验证码中文字</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>根据现成的开源项目 http://code.google.com/p/pytesser/改写 在window上用easy_install安装不上  看了下源码发现代码很少  于是就想自己改写一下   添加支持网络图片的直接解析   #coding:utf-8 #import sys #reload(sys) #sys.s</div> </li> <li><a href="/article/736.htm" title="AJAX" target="_blank">AJAX</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担   2.代码结构:    <html> <head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ... </div> </li> <li><a href="/article/863.htm" title="创业OR读研" target="_blank">创业OR读研</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/%E5%88%9B%E4%B8%9A/1.htm">创业</a> <div>        现在研一,有种想创业的想法,不知道该不该去实施。因为对于的我情况这两者是矛盾的,可能就是鱼与熊掌不能兼得。                研一的生活刚刚过去两个月,我们学校主要的是</div> </li> <li><a href="/article/990.htm" title="需求做得好与坏直接关系着程序员生活质量" target="_blank">需求做得好与坏直接关系着程序员生活质量</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/IT+%E7%94%9F%E6%B4%BB/1.htm">IT 生活</a> <div>         这个故事还得从去年换工作的事情说起,由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司,专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发,从此苦逼的日子开始了。        系统背景:五月份就有同事前往甲方了解需求一直到6月份,后续几个月也完</div> </li> <li><a href="/article/1117.htm" title="如何定义和区分高级软件开发工程师" target="_blank">如何定义和区分高级软件开发工程师</a> <span class="text-muted">aoyouzi</span> <div>在软件开发领域,高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置,但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为,单纯使用年限来划分开发人员存在问题,两个同样具有 10 年开发经验的开发人员可能大不相同。近日,他发表了一篇博文,根据开发者所能发挥的作用划分软件开发工程师的成长阶段。   初</div> </li> <li><a href="/article/1244.htm" title="Servlet的请求与响应" target="_blank">Servlet的请求与响应</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/get%E6%8F%90%E4%BA%A4/1.htm">get提交</a><a class="tag" taget="_blank" href="/search/java%E5%A4%84%E7%90%86post%E6%8F%90%E4%BA%A4/1.htm">java处理post提交</a> <div>  Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介     1,Http的请求方式(get  ,post);   客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法,  http的get方式 servlet就是都doGet(</div> </li> <li><a href="/article/1371.htm" title="web.xml配置详解之listener" target="_blank">web.xml配置详解之listener</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/listener/1.htm">listener</a> <div>一.定义 <listener> <listen-class>com.myapp.MyListener</listen-class> </listener>   二.作用        该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响</div> </li> <li><a href="/article/1498.htm" title="Web页面性能优化(yahoo技术)" target="_blank">Web页面性能优化(yahoo技术)</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/Yahoo/1.htm">Yahoo</a> <div>1.尽可能的减少HTTP请求数 content 2.使用CDN server 3.添加Expires头(或者 Cache-control) server 4.Gzip 组件 server 5.把CSS样式放在页面的上方。 css 6.将脚本放在底部(包括内联的) javascript 7.避免在CSS中使用Expressions css 8.将javascript和css独立成外部文</div> </li> <li><a href="/article/1625.htm" title="【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序" target="_blank">【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>游标   游标,简单的说就是一个查询结果的指针。游标作为数据库的一个对象,使用它是包括 声明 打开 循环抓去一定数目的文档直到结果集中的所有文档已经抓取完 关闭游标   游标的基本用法,类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档),在获取一个文档集时,可以提供一个类似JDBC的FetchSize</div> </li> <li><a href="/article/1752.htm" title="ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法" target="_blank">ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/ORA-12514/1.htm">ORA-12514</a> <div> 今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”,遂在网上找到了解决方案: ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件,你会看到如下信息:   # listener.ora Network Configuration File: D:\database\Oracle\net</div> </li> <li><a href="/article/1879.htm" title="Eclipse 问题 A resource exists with a different case" target="_blank">Eclipse 问题 A resource exists with a different case</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>在使用Eclipse进行开发的时候,出现了如下的问题: Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&</div> </li> <li><a href="/article/2006.htm" title="编程之美-小飞的电梯调度算法" target="_blank">编程之美-小飞的电梯调度算法</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> public class AptElevator { /** * 编程之美 小飞 电梯调度算法 * 在繁忙的时间,每次电梯从一层往上走时,我们只允许电梯停在其中的某一层。 * 所有乘客都从一楼上电梯,到达某层楼后,电梯听下来,所有乘客再从这里爬楼梯到自己的目的层。 * 在一楼时,每个乘客选择自己的目的层,电梯则自动计算出应停的楼层。 * 问:电梯停在哪</div> </li> <li><a href="/article/2133.htm" title="SQL注入相关概念" target="_blank">SQL注入相关概念</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>SQL Injection:就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。 具体来说,它是利用现有应用程序,将(恶意)的SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。 首先让我们了解什么时候可能发生SQ</div> </li> <li><a href="/article/2260.htm" title="[光与电]光子信号战防御原理" target="_blank">[光与电]光子信号战防御原理</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%90%86/1.htm">原理</a> <div>       无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢?       我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下       根据光</div> </li> <li><a href="/article/2387.htm" title="oracle 11g新特性:Pending Statistics" target="_blank">oracle 11g新特性:Pending Statistics</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/dbms_stats/1.htm">dbms_stats</a> <div>oracle 11g新特性:Pending Statistics 转 从11g开始,表与索引的统计信息收集完毕后,可以选择收集的统信息立即发布,也可以选择使新收集的统计信息处于pending状态,待确定处于pending状态的统计信息是安全的,再使处于pending状态的统计信息发布,这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。 在 11g 之前的版本中,D</div> </li> <li><a href="/article/2514.htm" title="快速理解RequireJs" target="_blank">快速理解RequireJs</a> <span class="text-muted">dengkane</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/requirejs/1.htm">requirejs</a> <div>RequireJs已经流行很久了,我们在项目中也打算使用它。它提供了以下功能: 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂。 在html中引入requirejs 在HTML中,添加这样的 <script> 标签: <script src="/path/to</div> </li> <li><a href="/article/2641.htm" title="C语言学习四流程控制if条件选择、for循环和强制类型转换" target="_blank">C语言学习四流程控制if条件选择、for循环和强制类型转换</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include <stdio.h> int main(void) { int i, j; scanf("%d %d", &i, &j); if (i > j) printf("i大于j\n"); else printf("i小于j\n"); retu</div> </li> <li><a href="/article/2768.htm" title="dictionary的使用要注意" target="_blank">dictionary的使用要注意</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/IO/1.htm">IO</a> <div>NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: user.user_id , @"id", user.username , @"username", </div> </li> <li><a href="/article/2895.htm" title="Android 中的资源访问(Resource)" target="_blank">Android 中的资源访问(Resource)</a> <span class="text-muted">finally_m</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/String/1.htm">String</a><a class="tag" taget="_blank" href="/search/drawable/1.htm">drawable</a><a class="tag" taget="_blank" href="/search/color/1.htm">color</a> <div> 简单的说,Android中的资源是指非代码部分。例如,在我们的Android程序中要使用一些图片来设置界面,要使用一些音频文件来设置铃声,要使用一些动画来显示特效,要使用一些字符串来显示提示信息。那么,这些图片、音频、动画和字符串等叫做Android中的资源文件。 在Eclipse创建的工程中,我们可以看到res和assets两个文件夹,是用来保存资源文件的,在assets中保存的一般是原生</div> </li> <li><a href="/article/3022.htm" title="Spring使用Cache、整合Ehcache" target="_blank">Spring使用Cache、整合Ehcache</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%40Cacheable/1.htm">@Cacheable</a> <div>Spring使用Cache            从3.1开始,Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中,等到下次利用同样的</div> </li> <li><a href="/article/3149.htm" title="当druid遇上oracle blob(clob)" target="_blank">当druid遇上oracle blob(clob)</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>http://blog.csdn.net/renfufei/article/details/44887371 众所周知,Oracle有很多坑, 所以才有了去IOE。 在使用Druid做数据库连接池后,其实偶尔也会碰到小坑,这就是使用开源项目所必须去填平的。【如果使用不开源的产品,那就不是坑,而是陷阱了,你都不知道怎么去填坑】 用Druid连接池,通过JDBC往Oracle数据库的</div> </li> <li><a href="/article/3276.htm" title="easyui datagrid pagination获得分页页码、总页数等信息" target="_blank">easyui datagrid pagination获得分页页码、总页数等信息</a> <span class="text-muted">ldzyz007</span> <div>var grid = $('#datagrid');  var options = grid.datagrid('getPager').data("pagination").options;  var curr = options.pageNumber;  var total = options.total;  var max =</div> </li> <li><a href="/article/3403.htm" title="浅析awk里的数组" target="_blank">浅析awk里的数组</a> <span class="text-muted">nigelzeng</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/awk/1.htm">awk</a> <div>awk绝对是文本处理中的神器,它本身也是一门编程语言,还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论,如何利用数组来帮助完成文本分析。   有这么一组数据:   abcd,91#31#2012-12-31 11:24:00 case_a,136#19#2012-12-31 11:24:00 case_a,136#23#2012-12-31 1</div> </li> <li><a href="/article/3530.htm" title="搭建 CentOS 6 服务器(6) - TigerVNC" target="_blank">搭建 CentOS 6 服务器(6) - TigerVNC</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>安装GNOME桌面环境 # yum groupinstall "X Window System" "Desktop" 安装TigerVNC # yum -y install tigervnc-server tigervnc 启动VNC服务 # /etc/init.d/vncserver restart # vncser</div> </li> <li><a href="/article/3657.htm" title="Spring 数据库连接整理" target="_blank">Spring 数据库连接整理</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>1、数据库连接jdbc.properties配置详解   jdbc.url=jdbc:hsqldb:hsql://localhost/xdb   jdbc.username=sa   jdbc.password=   jdbc.driver=不同的数据库厂商驱动,此处不一一列举   接下来,详细配置代码如下:    Spring连接池    </div> </li> <li><a href="/article/3784.htm" title="Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常" target="_blank">Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常</a> <span class="text-muted">xp9802</span> <div>用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错      异常栈:java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常       导入包 jaxen-1.1-beta-6.jar 解决; &nb</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>