AJAX学习----DOM基础(2)

最新推荐文章于 2024-10-30 18:24:25 发布

tzd_java

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量602

点赞数

文章标签： ajax input mozilla javascript function ie

本文链接：https://blog.csdn.net/tzd_java/article/details/2195466

版权

闲话少说,继续学习DOM的一些基础知识!

几个重要的DOM属性

childNodes

可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含

了给定元素节点的全体子元素。

nodeType( 一般用于文本节点)

用来区分节点的类型，元素节点的nodeType属性值是1，属性节点的nodeType属性值

是2，文本节点的nodeType属性值是3。

nodeValue //取文本节点值

可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空。

下面我做一个实例来检验一下这几个函数!

<html>

    <head>
        <title>DOM study</title>
        <script language="javascript">

            function init(){
               var elements = document.forms[0].childNodes; //取得testfm下的所有子元素
                alert(elements.length);
                for(var i = 0; i<elements.length; i++) {
                    var element = elements[i];

//在IE里为8, 但在mozilla里，却为13个，原因为在IE忽略了换行！
if(element.nodeType == 1&& element.nodeName == "INPUT") {

                   //1为元素节点，节点名子为INPUT
                  alert(element.getAttribute("value")); //输出为四个INPUT中的值，1 2 3 4
             }

        }
            var p = document.getElementById("content");
            var txt = p.childNodes[0].nodeValue;

            //通过nodeValue属性取点p后的文本结点的值 content here!
            alert(txt);
        }
            window.οnlοad=init;
        </script>
    </head>
    <body>

            <input id="id1" type="text" name="testinput1" value="1" /><br>
            <input id="id1" type="text" name="testinput1" value="2" /><br>
            <input id="id1" type="text" name="testinput1" value="3" /><br>
            <input id="id1" type="text" name="testinput1" value="4" /><br>
            <p id="content"> content here!</p>

</form>

</body>
</html>