JavaScriptのDOM_操作内容

6752 ワード

JavaScript

一、innerText属性

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById("box");

       // alert(box.innerText);//              HTML  (      )     

        box.innerText='Mr.Lee';//   ,         

        box.innerText='<strong>Mr.Lee</strong>';//Strong      ，        

       

    };

</script>

</head>

<body>

    <div id="box"><p>  Div</p></div>

</body>

Firefox以外のブラウザはこの方法をサポートします.しかし、FirefoxのDOM 3レベルは他の類似の属性を提供しています.

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.textContent);

     };

</script>

</head>

<body>

<div id="box"><p>  Div</p></div>

</body>

　　互換案を作成:

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById("box");

        

        alert(getInnerText(box));

        setInnerText(box,"wodedfadf");

        

       //    

        function getInnerText(element) {

            return (typeof element.textContent == 'string') ? element.textContent : element.innerText;

        }

        

        function setInnerText(element, text) {

            if (typeof element.textContent == 'string') {

　　　　　　　　　　element.textContent = text;

            } else {

                element.innerText = text;

            }

        }

       

    };

</script>

</head>

<body>

    <div id="box"><p>  Div</p></div>

</body>

二、innerHTML属性

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.innerHTML); //    (    HTML  )

        box.innerHTML = '<b>123</b>';     //    HTML，       ;

        alert(box.innerHTML);

     };

</script>

</head>

<body>

<div id="box"><p>  Div</p></div>

</body>

innerHTMLはHTMLを挿入することができますが、それ自体には一定の制限があります.いわゆる作用領域要素は、この作用領域から離れると無効になります.

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        box.innerHTML = "<script>alert('Lee');</script>"; //<script>       

        box.innerHTML = "<style>background:red;</style>"; //<style>       

     };

</script>

</head>

<body>

<div id="box"><p>  Div</p></div>

</body>

三、outer Text
outer Textは値を取る時innerTextと同じで、同時にフォックスは支持しないで、価値の方法を賦課するのはかなり危険です.彼はテキストの内容を交替しただけではなくて、元素を直接抹消します.

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.outerText);

        box.outerText = '<b>123</b>';

        alert(box.outerText);

        alert(document.getElementById('box')); //null，      

     };

</script>

</head>

<body>

<div id="box"><p>  Div</p></div>

</body>

四、outerHTML
outerHTML属性は、取得値とinners HTMLが一致していますが、outer Textと同じで、危険です.値付け後に要素を消去します.

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        box.outerHTML = '123';

        alert(document.getElementById('box')); //null，      ，       

     };

</script>

</head>

<body>

<div id="box"><p>  Div</p></div>

</body>

JavaScript-Object and Funct