DOM基础教程之使用DOM

阅读 602 收藏 0 点赞 0 评论 0

在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页

对于一个DOM节点node,都有一系列的属性和方法可以使用。常用的有下表。

完善:http://www.w3school.com.cn/xmldom/dom_element.asp

1.访问节点

BOM提供了一些边界的方法访问节点,常用的就是getElementsByTagName(),和getElementById()


<script type="text/javascript">

    function searchDOM(){

        var oLi = document.getElementsByTagName("li");

       var j =oLi.length;

       var j2 =oLi[5].tagName;

        var j3 =oLi[0].childNodes[0].nodeValue;

        document.write(j+"<br>"+j2+"<br>"+j3+"<br>");

    }

</script>

<body>

<body onload="searchDOM()">

<div id-"in"></div>

<ul>客户端语言

    <li>HTML</li>

    <li>JavaScript</li>

    <li>CSS</li>

</ul>

<ul>服务器端语言

    <li>ASP.NET</li>

    <li>JSP</li>

    <li>PHP</li>

</ul>

</body>

document.getElementById()


<script type="text/javascript">

    window.onload = function(){

        function findid(){

            var j4 =oli2.tagName;

            document.write(j4);

        }

        var oli2 = document.getElementById("inn");

        oli2.onclick = findid;

    }

</script>

<li id="inn">PHP</li>


 

<html>

<body id="myid" class="mystyle">

<div class="myid2"></div>

<script type="text/javascript">

x=document.getElementsByTagName('div')[0];

document.write("div CSS class: " + x.className);

document.write("<br />");

document.write("An alternate way: ");

document.write(document.getElementById('myid').className);

</script>

</body> </html> //id获得className

评论列表
文章目录


问题


面经


文章

微信
公众号

扫码关注公众号