「查詢」找出元素與元素集合、「修改」元素屬性、元素與屬性節點的新增與附加、「刪除」元素節點

Posted on Edited on In Views: Disqus:

 

以下面為範例，示範一些DOM方法的如何使用

<!DOCTYPE html>
<html>
<head>
    <style>
        .red {
            color: red;
        }

        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <form action="/" method="post" id="form1">
        <input type="file" id="myFile" multiple size="50">
    </form>
    <form action="/" method="post" id="form2">
        First name: <input type="text" name="fname" value="Bob"><br>
        Last name: <input type="text" name="lname" value="John"><br>
    </form>
    <p id="demo1">demo1</p>
    <p id="demo2" class="red">demo2</p>
    <h1 id="demo3" class="red">demo3</h1>
    <h1 id="demo4">demo4</h1>
</body>
</html>

 

一、找出元素與元素集合

1、document.getElementById(id)

2、document.getElementsByTagName(name)

3、document.getElementsByClassName(name)

 

二、修改元素屬性

1、element.innerHTML =  new html content

2、element.attribute = new value

3、element.setAttribute(attribute, value)

4、element.style.property = new style

 

三、元素與屬性節點的新增與附加

一個空的範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>

</body>
</html>

 

1、元素的新增與附加

document.createElement(element)、document.appendChild(element)

var p = document.createElement("p");
p.innerText = "new element";
document.body.appendChild(p);

不使用 innerText 屬性時也可以使用 createTextNode 方法來做

 

2、屬性的新增與附加

document.createAttribute(attributeName)、element.setAttributeNode(AttributeNode)

var p = document.createElement("p");
p.innerText = "new element";

var att = document.createAttribute("class");
att.value = "democlass";
p.setAttributeNode(att);

document.body.appendChild(p);

 

四、刪除元素節點

document.replaceChild(newnode,oldnode)、document.removeChild(element)

承第三項例子