Question

如何设置属性，但仅限于具有特定值的元素？

例如：

<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>

如何制作javascript文件，为具有Cow的元素添加属性？添加元素：name with value：Fred。

我已经尝试了这个并且它添加了属性NOT THE VALUE，但它也将它添加到所有元素。

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

如果您希望实际添加新的HTML元素，您可以执行以下操作：

//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>

如果您想将其添加为现有元素的属性。

    //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>

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

1 个答案: