源码-JavaScript&jQuery交互式前端开发-第5章-文档对象模型-章节示例

来源：互联网发布：淘宝的差评多久会生效编辑：程序博客网时间：2024/05/16 16:16

示例效果：

JS代码：

// ADDING ITEMS TO START AND END OF LISTvar list = document.getElementsByTagName('ul')[0];                 // Get the <ul> element// ADD NEW ITEM TO END OF LISTvar newItemLast = document.createElement('li');                    // Create elementvar newTextLast = document.createTextNode('cream');                // Create text nodenewItemLast.appendChild(newTextLast);                              // Add text node to elementlist.appendChild(newItemLast);                                     // Add element end of list// ADD NEW ITEM START OF LISTvar newItemFirst = document.createElement('li');                   // Create elementvar newTextFirst = document.createTextNode('kale');                // Create text nodenewItemFirst.appendChild(newTextFirst);                            // Add text node to elementlist.insertBefore(newItemFirst, list.firstChild);                  // Add element to listvar listItems = document.querySelectorAll('li');                   // All <li> elements// ADD A CLASS OF COOL TO ALL LIST ITEMSvar i;                                                             // Counter variablefor (i = 0; i < listItems.length; i++) {                           // Loop through elements  listItems[i].className = 'cool';                                 // Change class to cool}// ADD NUMBER OF ITEMS IN THE LIST TO THE HEADINGvar heading = document.querySelector('h2');                        // h2 elementvar headingText = heading.firstChild.nodeValue;                    // h2 textvar totalItems = listItems.length;                                 // No. of <li> elementsvar newHeading =  headingText + '<span>' + totalItems + '</span>'; // Contentheading.innerHTML = newHeading;                                    // Update h2 using innerHTML (not textContent) because it contains markup

HTML代码：

<!DOCTYPE html><html>  <head>    <title>JavaScript & jQuery - Chapter 5: Document Object Model - Example</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="css/c05.css">  </head>  <body>    <div id="page">      <h1 id="header">List</h1>      <h2>Buy groceries</h2>      <ul>        <li id="one"><em>fresh</em> figs</li>        <li id="two">pine nuts</li>        <li id="three">honey</li>        <li id="four">balsamic vinegar</li></ul>    </div>    <script src="js/example.js"></script>  </body></html>

CSS代码：（参考：源码-JavaScript&jQuery交互式前端开发-第5章-文档对象模型-更新文本和标签， http://blog.csdn.net/hpdlzu80100/article/details/52679923）

0 0