HTML Objects的操作

Posted on Edited on In Views: Disqus:

 

以img tag為例，我們利用下面這一段程式來新增一HTML Object

var htmlObject = document.createElement("img");

 

 

HTML Object也被視為一個DOM Node，至於對HTML Object的操作則可參考以下範例

<!DOCTYPE html>
<html>
<body>

    <p>Click the button to create an IMG element.</p>

    <button onclick="myFunction()">Try it</button>

    <script>
        function myFunction() {
            var x = document.createElement("img");
            x.setAttribute("src", "http://i.imgur.com/RKlUgbT.png");
            x.setAttribute("width", "304");
            x.setAttribute("height", "228");
            x.setAttribute("alt", "The Pulpit Rock");
            document.body.appendChild(x);
        }
    </script>

</body>
</html>

除了可以操作他的屬性之外，還可以操作元素的共通屬性、方法與事件，

請參考DOM-Element Object Properties and Methods(元素共通屬性與方法)、DOM-events

 

如果你要新增input、a、p、table...等等元素的HTML Object，

對其操作方式都是一樣的。

 

另外再補充一下，對img 物件的操作還有跟別元素有不一樣地方的是，

img物件有自己的屬性給開發者使用，如下範例黃底部份，

注意物件名稱有分大小寫，還蠻新奇的。

<!DOCTYPE html>
<html>
<body>

    <p>Click the button to create an IMG element.</p>

    <button onclick="myFunction()">Try it</button>

    <script>
        function myFunction() {
            var x = new Image();
            x.src = "http://i.imgur.com/RKlUgbT.png";
            x.width = 304;
            x.height = 228;
            x.setAttribute("alt", "The Pulpit Rock");
            document.body.appendChild(x);
        }
    </script>

</body>
</html>

 

參考資料：

Image()

HTML DOM Anchor Object