代码改变世界

Javascript 关于DOM方法 getElementsByClassName、getElementsByTagName、getElementById、setAttribute、getAttribute 的理解

2016-08-09 15:55  yojiaku  阅读(859)  评论(0)  编辑  收藏  举报 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <title> 5 DOM Function</title>
    <style type="text/css">
        body{
            color:white;
            background-color: black;
        }
        p{
            color: yellow;
            font-family: "arial", sans-serif;
            font-size: 1.2em;
        }
        #purchases{
            border:1px solid white;
            background-color: #333;
            color:#ccc;
            padding: 1em;
        }
        /* Although id can only be used once, it can also set CSS for other elements which are included in particulur element */
        #purchases li{
            font-weight: bold;
        }
    </style>
</head>
<body>
<!-- A simple example -->
    <h1> What to buy </h1>
    <p title="a gentle reminder"> Don't forget to buy this staff. </p>
    <ul id="purchases">
        <li> A tin of beans </li>
        <li class="sale"> Cheese </li>
        <li class="sale important"> Milk </li>
    </ul>

<!-- getElementById, getElementByTagName, getElementsByClassName, getAttribute, setAttribute -->
<script type="text/javascript">
    /* Let's explain what is the DOM's meaning:
        D : means document;
        O : means objects, there are three types of objects in javascript==>
            user-defined object: the object created by your ownself;
            native object: thw object created by javascript itself, like Array, Math, Date and so on;
            host object: the object provided by web browser, the basic object of host object is window object. And the properties & functions of window object are called "BOM" which I think call it "WOM" is more suitable. BOM provides window.blur & window.open functions.
        M : means "Model" or "Map" that standards the forms of some things.
    */

    /* node : a connection point in the network. The document is made up of nodes. It includes three types => element node; text node; attribute node.
        element node : the html's tags, like <html> <body> and so on;
        text node : just like the contents of <p> =>"XXXXXXX", it is often included in element node, but not every element node has text node;
        attribute node : description of elements, like almost every element node has an attribute node "title", for example, <p> has title="a gentle reminder".
    */

    /* obtain elements : there are three functions can obtain element nodes => via id, tag name, class name;*/

    console.log(typeof document.getElementById("purchases"));
    /* It will show "object" in browser */

    console.log(document.getElementsByTagName("li").length);
    /* this function returns an array, and every element in this array is an object. You can try follows to verify: */
    for(var i = 0;i < document.getElementsByTagName("li").length;i++)
    {
        console.log(typeof document.getElementsByTagName("li")[i]);
    }
    /* The most important thing is to be careful the function's spelling .
        If you want to know how many nodes in a document, you can use this :
        console.log(document.getElementsByTagName("*").length);
        you can also combine getElementsByTagName and getElementById,like follows:
        you will know how many lists the id "purchses" includes.
    */
    var shopping = document.getElementById("purchases");
    var items = shopping.getElementsByTagName("*");
    console.log(items.length);
    for(var i = 0;i < items.length;i++)
    {
        console.log(typeof items[i]);
    }

    /* getElementsByClassName: it also returns an array. */
    var sales = shopping.getElementsByClassName("sale");
    console.log(sales);    
    
    function getElementsByClassName(node, classname){
        if(node.getElementsByClassName)
        {
            //console.log("Yes!");
            return node.getElementsByClassName(classname);
        }else{
            var results = new Array();
            var elems = node.getElementsByTagName("*");
            for(var i = 0;i < elems.length;i++)
            {
                if(elems[i],className.indexOf(classname)!=-1)
                {
                    results[results.length] = elems[i];
                }
            }
            return results;
        }
    }

    var sales2 = getElementsByClassName(shopping, "sale");
    console.log(sales2);


    /* getAttribute(): object.getAttribute(attribute); you can use this function to look for one particular object's attribute. */
    var paras = document.getElementsByTagName("p");
    for(var i = 0;i < paras.length;i++)
    {
        console.log(paras[i].getAttribute("title"));
    }

    /* setAttribute(): object.setAttribute(attribute, value); you can use this function to change or set object's attribute. */
    console.log(shopping.getAttribute("title"));
    shopping.setAttribute("title", "a list of goods");
    console.log(shopping.getAttribute("title"));
    /* It is noteworthy that making changes to the document via function setAttribute() makes no difference when you view source using browser's select "view source". It because of  DOM's operating mode : static content will be first loaded, dynamic refresh again, and dynamic refresh does not affect the static content of documents.
    We can see this function is very wonderful clearly!
    */
</script>
</body>
</html>

o(*￣▽￣*)o，代码里已经说得很清楚了，代码还包括了一些例子，下面放出例子的输出结果：

⊙０⊙，可以将代码复制到你的编辑器里查看。