zoukankan html css js c++ java

4.8.2.JSDOM对象控制HTML元素详解

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DOM对象控制HTML</title>
</head>
<body>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <a id="aid" title="得到了a标签的属性">hello</a>
    <a id="aid2">aid2</a>
    <ul><li>1</li><li>2</li><li>3</li></ul>
    <div id="div">
        <p id="pid">div的P元素</p>
    </div>
    <script>
        function getName() {
            var count = document.getElementsByName("pn");
            alert(count.length);
            var p = count[2];
            p.innerHTML = "World";
        }
        function getAttr() {
            var anode = document.getElementById("aid");
            var attr = anode.getAttribute("id");
            alert(attr);
        }
        function setAttr() {
            var anode = document.getElementById("aid2");
            anode.setAttribute("title", "动态设置a的title属性");
            var attr = anode.getAttribute("title");
            alert(attr);
        }
        function getChildNode() {
            var childnode = document.getElementsByTagName("ul")[0].childNodes;
            alert(childnode.length);
            alert(childnode[0].nodeType)
        }
        function getParentNode() {
            var div = document.getElementById("pid");
            alert(div.parentNode.nodeName);
        }
        function createNode() {
            var body = document.body;
            var input = document.createElement("input");
            input.type = "button";
            input.value = "按钮";
            body.appendChild(input);
        }
        function addNode() {
            var div = document.getElementById("div");
            var node = document.getElementById("pid");
            var newnode = document.createElement("p");
            newnode.innerHTML = "动态添加体格p元素";
            div.insertBefore(newnode, node);
        }
        function removeNode() {
            var div = document.getElementById("div");
            var p = div.removeChild(div.childNodes[1]);
        }
        function getSize() {
            var width = document.body.offsetWidth || document.documentElement.offsetWidth;
            var height = document.body.offsetHeight;
            alert(width + " " + height);
        }
        getSize();
    </script>
</body>
</html>

查看全文

相关阅读:
docker学习及应用
 openstack入门及应用
 C# 值类型，引用类型区别
 C# 继承
 Unity 使用Plugins接入安卓SDK 基础篇
 详谈 Unity3D AssetBundle 资源加载,结合实际项目开发实例
 Unity3D 协程浅谈
 《俄罗斯，有点意思》
老男孩之《生日快乐》
【诗歌系列】《神曲》

原文地址：https://www.cnblogs.com/kikyoqiang/p/11223313.html