用纯JavaScript操作dom

时间:2018-07-02 20:57:07

标签: javascript dom

首先,我想说我是一个后端开发人员,实际上只使用Javascript进行表单验证。

已为我分配了使用“纯Javascript”来操纵DOM以使用语义HTML 5标签的任务。有人告诉我,分配作业的人担心我“使用HTML知识而不是请求的Javascript”。在查看我使用的javascipt代码时,是否有人知道“我使用HTML知识而不是所请求的Javascript”意味着什么?我知道Javascript是内联的,但这就是页面模板要我添加的地方。

任何评论或答案将不胜感激。

以下是页面。我添加了“严格使用”行下的代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Animal Facts</title>
        <style>
            body{
                font-size:1.2rem;
                font-family:helvetica, arial, sans-serif;
            }
            figure img{max-width:100%;height:auto}
        </style>
    </head>
    <body>
        <div>
            <h1>Animal Facts</h1>

            <div class="image">
                <img src="http://via.placeholder.com/500x300" alt="Lorem Ipsum"/>   
                <div class="caption">Placeholder Image</div>
            </div>

            <div class="animal-facts">
                <div class="description">Bear Facts</div>
                <h1>Unlike Many Mammals...</h1>
                <ul>
                    <li>Polar bears are the largest land predators on earth,standing over 11' high and weighing over 1,700 lbs.</li>
                    <li>The giant panda is actually a bear.</li>
                    <li>Bears have an excellent sense of smell, better than dogs or possibly any other mammal.</li>
                </ul>
            </div>
            <div class="animal-facts">
                <div class="description">Tiger Facts</div>
                <h1>Interesting information about tigers</h1>
                <ul>
                    <li>Tigers are the largest wild cats in the world. Adults can weigh up to 363kg – that’s about the same as ten ten year olds! – and measure up to 3.3m!</li>
                    <li>Tigers are carnivores, eating only meat. They mainly feed on large mammals such as deer, wild pigs, antelope and buffalo.</li>
                    <li>Did you know that we have a FREE downloadable tiger primary resource? Great for teachers, homeschoolers and parents alike!</li>
                    <li>Tigers are solitary hunters, and generally search for food alone at night. They quietly stalk their prey until they are close enough to pounce – then they kill their victim with a bite to the neck or back of the head. Ouch!</li>
                    <li>Unlike most members of the cat family, tigers like water. They are good swimmers and often cool off in pools or streams.</li>
                    <li>When a tiger wants to be heard, you’ll know about it, gang – because their roar can be heard as far as three kilometres away.</li>
                    <li>They may be big and heavy, but tigers are by no means slow movers. In fact, at full speed they can reach up to 65km/h!</li>
                    <li>These fierce felines have walked the earth for a long time. Fossil remains of tigers found in parts of China are believed to be 2 million years old. Yikes!</li>
                    <li>Every tiger in the world is unique – no two tigers have the same pattern of stripes.</li>
                    <li>Today, there are five subspecies of tiger: Bengal, South China, Indochinese, Sumatran and Siberian. Sadly, three subspecies of tiger have become extinct – Caspian, Bali and Javan.</li>
                    <li>Less than 100 years ago, tigers could be found throughout Asia. Sadly, hunting and habitat loss have put populations at risk, and today their range has been reduced to around 7% of its former size. That’s why we need to do all we can to protect these beautiful beasts!</li>
                </ul>
            </div>
        </div>
<script type="text/javascript">

     "use strict";

    /** Put Javascript code here **/
    /**Create variables to store current tags that will be reused after the conversion **/
    var div = document.getElementsByTagName('div')[0];
    var ulTiger = document.getElementsByTagName('ul')[1];
    var ulBear = document.getElementsByTagName('ul')[0];
    var h1Tiger = document.getElementsByTagName('h1')[2]
    var h1Bear = document.getElementsByTagName('h1')[1];
    var h1Main = document.getElementsByTagName('h1')[0];
    var body = document.body

    /**Create variables for the new Semantic HTML5 tags that will be in the page after the conversion **/
    var Main = document.createElement('main');
    var detailsTiger = document.createElement('details');
    var detailsBear = document.createElement('details');
    var summaryTiger = document.createElement('summary');
    var summaryBear = document.createElement('summary');
    var figCaption = document.createElement('figcaption');
    var figure = document.createElement('figure');

    /**Set the first div into a variable so that the <main> can replace the  outer <div> after the conversion
       This is done so that I can create the main tag with all of its contents prior to removing the outer <div>
       from the document **/
    var child = document.getElementByTagName('div')[0];

    /**Add the text and image to the figure tag and Append the figcaption tag to it **/
    figCaption.textContent = 'Placeholder Image';
    figure.innerHTML = '<img src="http://via.placeholder.com/500x300" alt="Lorem Ipsum">';
    figure.append(figCaption);

    /**Add the animal <detail> and <summary> tags in the correct order
    summaryTiger.innerText = 'Tiger Facts';
    detailsTiger.appendChild(ulTiger);

    ulTiger.insertAdjacentElement("beforebegin", summaryTiger);

    ulTiger.insertAdjacentElement("beforebegin", h1Tiger);


    summaryBear.innerText = 'Bear Facts';
    detailsBear.appendChild(ulBear);
    ulBear.insertAdjacentElement("beforebegin", summaryBear);

    ulBear.insertAdjacentElement("beforebegin", h1Bear);


    /** Insert the new <main> tag into the <body> before the outer <div>. This is done so that 
        the new Semantic HTML5 tags are created and placed prior to removing the <div> tags 
        from the document**/
    body.insertBefore(Main, div);

    /** Insert the new <details> tags and their contents into the new <main> element **/
    Main.append(detailsTiger);
    Main.insertBefore(detailsBear, detailsTiger);
    Main.insertBefore(figure, detailsBear);
    Main.insertBefore(h1Main, figure);

    /** Now that all of the new Semantic HTML5 tags have been added, we can remove the outer <div> 
        and all of its contents from the document **/
    body.removeChild(child);

</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

由于这是一项作业,因此我认为不应给您确切的解决方案,而应通过查看示例来学习。了解事物并进行实验。

要尝试为您提供帮助,请按以下步骤进行操作,但是请不要使用作业中描述的每个步骤:

/*
 * Replaces all DOM elements matching the given selector
 * with an element using the given tagName
 */
function replaceElements(selector, tagName) {
    // For every element matching the selector
    Array.from(document.querySelectorAll(selector)).forEach(function (el) {
        // Create an element with the new tagName
        var wrapper = document.createElement(tagName);
        // Insert it before the element to replace
        el.insertAdjacentElement("beforebegin", wrapper);
        // Transfer child nodes
        while (el.childNodes.length > 0) {
            wrapper.appendChild(el.childNodes[0]);
        }
        // Remove the old element
        el.parentNode.removeChild(el);
    });
}

// Replace the outer div with a main element
replaceElements('body>div:first-of-type', 'main');

// Replace image figure and caption
replaceElements('.image', 'figure');
replaceElements('.caption', 'figcaption');

// Replace details and summaries
replaceElements('.description', 'summary');
replaceElements('.animal-facts h1', 'detail');
// Switch their order
Array.from(document.querySelectorAll('summary')).forEach(function (summary) {
    summary.parentNode.insertBefore(summary.nextElementSibling, summary);
});

正如其他人所说,使用“纯JavaScript” 意味着您不会使用jQuery之类的任何库。当然,这是一个比喻,因为jQuery实际上只是纯Javascript本身。