JavaScript的DOM_获取元素方法

W3C 提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作。

分别为:getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和 removeAttribute()。

1、getElementById()方法:

  接受一个参数:通过标签的id属性值获取该标签节点。如果找到相应的元素则返回该元素的 HTMLDivElement 对象,如果不存在,则返回 null。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById(‘box‘);        //获取 id 为 box 的元素节点
        alert(box.id);
    }
</script>
</head>
<body>
    <div id="box">测试Div</div>
</body>

  结果是:HTMLDivElement(表示div的节点对象)

  id 表示一个元素节点的唯一性,不能同时给两个或以上的元素节点创建同一个命名的 id。

  某些低版本的浏览器会无法识别 getElementById()方法建议区分大小写以免不兼容,比如 IE5.0-,这时需要做一些判断,可以结合浏览器检测来操作。

<script type="text/javascript">
    window.onload = function () {
        if(document.getElementById){                //判断是否支持 getElementById
            var box = document.getElementById(‘box‘);
            alert(box.id);
        }else{
            alert("浏览器不兼容,请更换")
        }
    };
</script>
</head>

<body>
    <div id="box">测试Div</div>
</body>

  当我们通过 getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了,而通过这个节点对象,我们可以访问它的一系列属性。

  

<script type="text/javascript">
     window.onload = function () {
        if(document.getElementById){                //判断是否支持 getElementById
            var box = document.getElementById(‘box‘);
            alert(box.tagName);                //DIV
            alert(box.innerHTML)            //测试 Div 获取当前元素节点的文本内容(包含HTML标签)
            alert(box.innerHTML = ‘玩转<strong>js</strong>‘);  //设置当前节点的文本内容,可以使用HTML标签,同样可以解析
        }else{
            alert("浏览器不兼容,请更换")
        }
    };
</script>
</head>

<body>
    <div id="box">测试Div</div>
</body>

   

<script type="text/javascript">
     window.onload = function () {
        if(document.getElementById){                //判断是否支持 getElementById
            var box = document.getElementById(‘box‘);
            alert(box.id);                    //获取id属性的值
            alert(box.id=‘Person‘);            //设置id属性的值
            alert(box.title);                //获取title的值
            alert(box.title=‘标题...‘);        //设置title的值
            alert(box.style);                // 获取CSS2Properties对象(即style属性对象)
            alert(box.style.color);            //获取 style 对象中 color 的值
            alert(box.style.color=‘blue‘);   //设置 style 对象中 color 的值
            alert(box.className);            //获取 class
            alert(box.className=‘barbox‘);        //设置class
            alert(box.bbb);                    //获取自定义属性的值,非 IE 不支持(如果有浏览器不支持,那么必须做兼容操作,或者尽可能不去使用)

        }else{
            alert("浏览器不兼容,请更换")
        }
    };

</script>
</head>
<body>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div</div>
</body>
时间: 2024-10-06 19:15:13

JavaScript的DOM_获取元素方法的相关文章

JavaScript的DOM_获取元素方法_getElementsByTagName()获取相同元素的节点列表

不管是 getElementById 还是 getElementsByTagName,在传递参数的时候,并不是所有浏览器都必须区分大小写,为了防止不必要的错误和麻烦,我们必须坚持养成区分大小写的习惯. 一.通过标签名获取节点 1.getElementsByTagName()方法通过标签名获取节点,因为标签名会重复,所以返回一个对象数组 HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表. <script type="text/javascript&qu

JavaScript的DOM_获取元素方法_getElementById()获取特定ID元素的节点

一.通过标签的id属性值获取该标签节点 接受一个参数:如果找到相应的元素则返回该元素的 HTMLDivElement 对象,如果不存在,则返回 null. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取 id 为 box 的元素节点 alert(box.id); } </script> </h

JavaScript的DOM_获取元素方法_getElementsByName()获取相同名称(name)的节点列表

一.通过标签的name属性获取节点 1.getElementsByName()方法通过标签的name属性获取节点,因为name有相同,所以返回一个对象数组HTMLCollection(NodeList). <script type="text/javascript"> window.onload = function () { if(document.getElementsByName){ var box = document.getElementsByName('text

JavaScript的DOM_获取元素周边大小

一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.clientLeft); alert(box.cl

JavaScript通过ID获取元素坐标

JavaScript通过ID获取元素坐标 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof var el = document.getElementByIdx

JavaScript的DOM_获取/设置/移除特定元素节点的属性_getAttribute()/setAttribute()/removeAttribute()

一.获取特定元素节点的属性的值_getAttribute() 1.getAttribute()方法将获取元素中某个属性的值.它和直接使用.属性获取属性值的方法有一定区别. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); alert(box.bbb); // 获取元素的自定义属性值,非 IE 不支持 自定义的属性不可以,结

JavaScript的DOM_获取CSS样式设置元素大小

一.通过 style 内联获取元素的大小 style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取元素 alert(box.style.width); //200px. 没有设置的话为空 alert(box.sty

JavaScript的DOM_获取和操作层次节点

一.层次节点的概述 节点的层次结构可以划分为:父节点与子节点.兄弟节点这两种.当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点. 二.childNodes 属性 childeNodes 属性可以获取某一个元素节点的所有子节点,这些子节点包含元素子节点和文本子节点. <script type="text/javascript"> window.onload = function(){ var box = document.getElementBy

JavaScript之怎样获取元素节点

JavaScript获取元素节点一共有三种方法,分别是通过元素ID.通过标签名字和通过类名字来获取: 1.通过元素ID属性的ID值来获得元素对象-getElementById() DOM提供了一个名为getElementById()的方法,这个方法将返回一个与括号里有着一样id值的元素节点对应的对象.他是document对象特有的函数,这个函数的参数只有一个,只能是你想要获得的元素的ID值,这个值必须放在单引号或者双引号里面. 注意:JavaScript语言区分字母大小写,所以在写getElem