JavaScript基础----32JSDOM对象控制HTML元素详解-2

最新推荐文章于 2021-06-19 20:38:03 发布

zhaihaohao1

最新推荐文章于 2021-06-19 20:38:03 发布

阅读量735

点赞数

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47354663

版权

JavaScript基础专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--JSDOM对象控制HTML元素详解-2-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="div">
    <p id="pid">div的p元素</p>
</div>
<!--访问父节点-->
<script>
    function getParentNode(){
        var pyunasu=document.getElementById("pid");
//        找到父节点，并找到父节点的元素名称
        alert(pyunasu.parentNode.nodeName)
    }
//    getParentNode();
</script>

<!--创建元素节点,在末尾插入-->
<script>
    function createNode(){
    var body=document.body;
        var input=document.createElement("input");
        input.type="button";
        input.value="按钮";
        body.appendChild(input);
    }
//    createNode();
</script>

<!--插入节点，（可以选择在哪插入）-->
<script>
    function addNode(){
        var div = document.getElementById("div");
        var pid = document.getElementById("pid");
        var newP = document.createElement("p");
        newP.innerHTML="动态添加p";
        div.insertBefore(newP,pid);
    }
//    addNode();
</script>

<!--删除节点-->
<script>
    function removeNode(){
        var div=document.getElementById("div");
        var p=div.removeChild(div.childNodes[1]);

    }
//   removeNode();
</script>

<!--获得屏幕宽度和高度-->
<script>
    function getSize(){
        var myWidth=document.documentElement.offsetWidth||document.body.offsetWidth
        var myHeight=document.documentElement.offsetHeight;
        alert(myWidth+">>>>>>"+myHeight);
    }
    getSize();
</script>



</body>
</html>

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础----32JSDOM对象控制HTML元素详解-2

html>lang="en"> charset="UTF-8"> id="div"> id="pid">div的p元素 function getParentNode(){ var pyunasu=document.getElementById("pid");// 找到父节点，并找到父节点的元素名称 a
复制链接

扫一扫