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

最新推荐文章于 2020-03-01 15:01:32 发布

预见未来to50

最新推荐文章于 2020-03-01 15:01:32 发布

阅读量635

点赞数

分类专栏： Front End Tech 文章标签： CSS HTML JavaScript 学以致用章节示例

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52680020

版权

Front End Tech 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

示例效果：

JS代码：

// ADDING ITEMS TO START AND END OF LIST
var list = document.getElementsByTagName('ul')[0];                 // Get the <ul> element

// ADD NEW ITEM TO END OF LIST
var newItemLast = document.createElement('li');                    // Create element
var newTextLast = document.createTextNode('cream');                // Create text node
newItemLast.appendChild(newTextLast);                              // Add text node to element
list.appendChild(newItemLast);                                     // Add element end of list

// ADD NEW ITEM START OF LIST
var newItemFirst = document.createElement('li');                   // Create element
var newTextFirst = document.createTextNode('kale');                // Create text node
newItemFirst.appendChild(newTextFirst);                            // Add text node to element
list.insertBefore(newItemFirst, list.firstChild);                  // Add element to list



var listItems = document.querySelectorAll('li');                   // All <li> elements

// ADD A CLASS OF COOL TO ALL LIST ITEMS
var i;                                                             // Counter variable
for (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 HEADING
var heading = document.querySelector('h2');                        // h2 element
var headingText = heading.firstChild.nodeValue;                    // h2 text
var totalItems = listItems.length;                                 // No. of <li> elements
var newHeading =  headingText + '<span>' + totalItems + '</span>'; // Content
heading.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）

预见未来to50

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
源码-JavaScript&jQuery交互式前端开发-第5章-文档对象模型-章节示例

示例效果：JS代码：// ADDING ITEMS TO START AND END OF LISTvar list = document.getElementsByTagName('ul')[0]; // Get the element// ADD NEW ITEM TO END OF LISTvar newItemLast = docu
复制链接

扫一扫

专栏目录