DOM获取页面的元素

最新推荐文章于 2024-07-18 09:15:00 发布

viczking

最新推荐文章于 2024-07-18 09:15:00 发布

阅读量1.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/viczking/article/details/80455694

版权

1. getElement系列访问

通过DOM获取页面的元素的三种方式

Ø getElementById( )方法访问DOM元素 —》 id获取一个元素

Ø getElementsByName( )方法访问DOM元素—》元素的name属性名获取(数组)

Ø getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)

Ø getElementsByClassName()方法访问DOM元素 –》类样式名称获取(数组)

案例演示

<script>
        //onload事件会等body的内容加载完后再执行 load()函数
      function load(){
          //根据id获取
          var bookname=document.getElementById("book").innerHTML;
          alert(bookname);
          //根据name属性获取--》(数组)
          var seasons= document.getElementsByName("season");
          //创建变量
          var ss="";
          for(var i=0;i<seasons.length;i++){
              ss+=seasons[i].value;
          }
          document.getElementById("content").innerHTML=ss;
          //根据标签名获取
          var contentes="";
       var inputs=   document.getElementsByTagName("input");
          for(var i=0;i<inputs.length;i++){
              contentes+=inputs[i].value;
          }
      // document.getElementById("cc").innerHTML="<h1>"+contentes+"</h1>";
          document.getElementById("cc").innerText="<h1>"+contentes+"</h1>"
      }

    </script>
</head>
<body οnlοad="load();">
<div class="content">
    <img src="images/book.jpg" alt="岛上书店"/>
    <div class="r">
        <div id="book">书名：岛上书店</div>
        <input name="changeBook" value="换换名称" type="button" οnclick="alterBook();" /><br>
        四季名称：
        <input name="season" type="text" value="春" />
        <input name="season" type="text" value="夏" />
        <input name="season" type="text" value="秋" />
        <input name="season" type="text" value="冬" /><br><br>
        <input name="b2" type="button" value="input内容" οnclick= "all_input()" />
        <input name="b3" type="button" value="四季名称" οnclick="s_input()" />
        <input name="b4" type="button" value="清空页面内容" οnclick="clearAll()" />
        <p id="replace"></p>
    </div>
</div>
<div id="content"></div>
<div id="cc"></div>
</body>

2. 操作节点的属性

Ø getAttribute("属性名")

Ø setAttribute("属性名","属性值")

<script>
    function showUrl(){
     //1找到该图片
         var img=document.getElementById("img");
          var url=img.getAttribute("src");
        alert(url);
    }
    function changeUrl(){
        //1找到该图片
        var img=document.getElementById("img");
        //更改src属性的值
        img.setAttribute("src","images/1.png");
    }
</script>
<body>
<button οnclick="showUrl();">查看图片的路径</button>
<button οnclick="changeUrl();">更换图片</button>
<img id="img" src="images/book.jpg" alt="我是一本书" >
</body>

3. 操作节点样式

Ø style属性

Ø className属性

HTML元素.style.样式属性＝"值"

document.getElementById("cart").style.backgroundColor="#f9f9f9";

document.getElementById("cartList").style.display="none";

HTML元素.className="样式名称"

document.getElementById("cart").className="cartOver";

<style type="text/css">
        .li {
            background-color: red;
            font-size: 45px;
        }
    </style>
</head>

<body>
<ul>
    <li id="zhu">朱茵</li>
    <li>马小玲</li>
    <li id="zz">珍珍</li>
    <li >高圆圆</li>
</ul>
</body>
</html>
<script>
    var love = document.getElementById("zhu");
    love.style.backgroundColor = "yellow";
   var zz=document.getElementById("zz");
    zz.className="li";
</script>