Javascript XML DOM设置属性为特定元素

Question

How do I go about setting an attribute, but only to an element that has a certain value in it?

For example:

<Farm>
<animals>
<type>chicken</type>
<age>1</age>
</animals>

<animals>
<type> Cat</type>
<age>4</age>
</animals>

 <animals>
<type>Cow</type>
<age> 3</age>
</animals>
</farm>

How do I make the javascript file, add an attribute to the element that has a Cow? Adding the element: name with value: Fred.

I've tried this and it adds the attribute NOT THE VALUE, but it adds it to ALL the elements too.

function get_firstchild(n) {
            x = n.firstChild;
            while (x.nodeType != 1) {
                x = x.nextSibling;
            }
            return x;
        }

        xmlDoc = loadXMLDoc("A74.xml");

        x = xmlDoc.documentElement;
        firstNode = get_firstchild(x);

        for (i = 0; i < firstNode.childNodes.length; i++) {
            if (firstNode.childNodes[i].nodeType == 1) {

                document.write("<br>Node Name: " + firstNode.childNodes[i].nodeName + "<br>");
                document.write("Node Type:  " + firstNode.childNodes[i].nodeType + "<br>");
                document.write("Node Value:  " + firstNode.childNodes[i].childNodes[0].nodeValue + "<br>");
                document.write("");
            }
        }


        x=xmlDoc.getElementsByTagName("animals");

        for(i=0;i<x.length;i++)
        {
            x.item(i).setAttribute("name","Fred");
        }

        //Output book title and edition value
        x=xmlDoc.getElementsByTagName("type");
        for (i=0;i<x.length;i++)
        {
            document.write(x[i].childNodes[0].nodeValue);
            document.write(" - name: ");
            document.write(x[i].parentNode.getAttribute('name'));
            document.write("");
        }

Answer 1

If you were looking to actually add a new HTML element you would do something like this:

 //get every element that has the tag name of "type" var types = document.getElementsByTagName("type"); //loop through this array-like object of html. (you do not have access to array.prototype methods so you can use slice or for loop. For less confusion I used a for loop. for (var i = 0; i < types.length; i++){ //if the text inside the HTML is === to cow, insert new HTML after it if (types[i].innerText === "Cow") { types[i].insertAdjacentHTML('afterend', '<name> Fred </name>'); } } 

 <Farm> <animals> <type>chicken</type> <age>1</age> </animals> <animals> <type> Cat</type> <age>4</age> </animals> <animals> <type>Cow</type> <age> 3</age> </animals> </farm> 

And if you wanted to add it as an attribute of the existing element.

  //get every element that has the tag name of "type" var types = document.getElementsByTagName("type"); //loop through this array-like object of html. (you do not have access to array.prototype methods so you can use slice or for loop. For less confusion I used a for loop. for (var i = 0; i < types.length; i++){ //if the text inside the HTML is === to cow, insert new HTML after it if (types[i].innerText === "Cow") { types[i].setAttribute("name", "Fred"); } } 

  <Farm> <animals> <type>chicken</type> <age>1</age> </animals> <animals> <type> Cat</type> <age>4</age> </animals> <animals> <type>Cow</type> <age> 3</age> </animals> </farm>