DOM-------1

    xiaoxiao2021-03-25  77

    节点类型:元素节点/属性节点/文本节点

    元素节点

    getElementById(id); PS:DOM操作必须等待HTML文档加载完毕才可以获取 <1> 把脚本移文档最后 <2> 用onload事件加载

    // 当网页所有内容都加载完再执行 window.onload = function(){ var data = document.getElementById("lalala"); alert(data); };

    属性节点

    tagName 标签名 innerHTML 元素节点里的内容(文本) id ID值(属性值,不是属性节点) title title值 style 获取style属性对象 className 获取class属性值

    属性中的值可以更改

    <script> window.onload = function(){ var data = document.getElementById("lalala"); alert("id:"+data.id); // id:lalala alert("class:"+data.className); // class:head alert("title:"+data.title); // title:标题 alert("style:"+data.style); // style:[object CSSStyleDeclaration] alert("innerHTML:"+data.innerHTML); // innerHTML:啦啦啦 }; </script> <div id="lalala" class="head" title="标题">啦啦啦</div>

    getElementsByTagName(“标签名”)

    根据标签名返回符合条件的数组

    data[0].HTML与data.item(0).innerHTML等效

    <script> window.onload = function(){ var data = document.getElementsByTagName("li"); alert(data[0].innerHTML); // 1 alert(data.item(0).innerHTML); // 1 }; </script> <div id="lalala" class="head" title="标题"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div>

    getElementsByName(“name”);

    根据name属性返回符合条件的数组

    <script> window.onload = function(){ var data = document.getElementsByName("input"); alert(data[1].size); // 20 }; </script> <body> <form> <input type="text" name="input" size="10"/> <input type="text" name="input" size="20"/> </form> </body>

    PS:div标签中没有name属性,ie无法获取

    属性值的操作

    1,getAttribute(“属性名”); 返回属性的值(对象/值) 2,setAttribute(“属性名”,”属性值”); 3,removeAttribute(“属性名”) 移除属性

    window.onload = function(){ var data = document.getElementById("lalala"); data.setAttribute("style","background-color:skyblue;"); } </script> <div id="lalala" class="head" title="标题"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div>
    转载请注明原文地址: https://ju.6miu.com/read-15190.html

    最新回复(0)