JavaScript基础----31JSDOM对象控制HTML元素详解-1

最新推荐文章于 2023-05-12 19:23:06 发布

zhaihaohao1

最新推荐文章于 2023-05-12 19:23:06 发布

阅读量578

点赞数

分类专栏： JavaScript基础

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

版权

JavaScript基础专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--JSDOM对象控制HTML元素详解-1-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<a id="aid" title="得到a的属性">得到A的属性</a>
<a id="aid2">设置a的属性</a>
   <!--通过name元素获取当前节点-->
<script>
    function getName(){
        //获取相同名称的节点，转化成数组
        var count=document.getElementsByName("pn");
        alert(count.length)
        var myp =count[0];
        myp.innerHTML="world";
    }
//    getName();
</script>

<!--通过元素获取当前节点-->
<script>
    function getName(){
        //获取相同名称的节点，转化成数组
        var count=document.getElementsByTagName("p");
        alert(count.length)
        var myp =count[0];
        myp.innerHTML="zhh";
    }
//    getName();
</script>

<!--获取元素属性-->
<script>
   function getAttr(){
       var aid=document.getElementById("aid");
       var attr=aid.getAttribute("title");
       alert(attr);
   }
//   getAttr();

</script>

<!--设置元素属性-->
<script>
   function setAttr(){
       var aid2=document.getElementById("aid2");
       aid2.setAttribute("title","设置属性");
       var attr=aid2.getAttribute("title");
       alert(attr);
   }
//   getAttr();

</script>

<ul><li>子节点1</li><li>子节点2</li><li>子节点3</li></ul>
<!--访问子节点-->
<script>
    function getChildNode(){
//        获取子节点
        var chilenode=document.getElementsByTagName("ul")[0].childNodes;
//        子节点的长度
        alert(chilenode.length);

    }
    getChildNode();
</script>

</body>
</html>

zhaihaohao1

关注

0
点赞
踩
0

收藏

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

html>lang="en"> charset="UTF-8"> name="pn">helloname="pn">helloname="pn">helloname="pn">helloid="aid" title="得到a的属性">得到A的属性id="aid2">设置a的属性 function getName(){ //获取
复制链接

扫一扫