JS中使用DOM来控制HTML元素

前端技术 2023/09/05 JavaScript

1.getElementsByName():获取name.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

例：

<p name=\"pn\">hello</p>
   <p name=\"pn\">hello</p>
   <p name=\"pn\">hello</p>
   <script>
       function getName(){
                  var count=document.getElementsByName(\"pn\");
                  alert(count.length);
                  var p=count[2];
                  p.innerHTML=\"world\";
          }
   </script>

结果：界面打印出三个hello，并且伴有一个提示框“3”，当点击确定后，界面显示的内容变为hello hello world

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··

2.getElementsByTagName():获取元素。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例

<p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <script>
       function getName(){
                  var count=document.getElementsByTagName(\"p\");
                  alert(count.length);
                  var p=count[2];
                  p.innerHTML=\"world\";
          }
   </script>

结果：界面打印出三个hello，并且伴有一个提示框“3”，当点击确定后，界面显示的内容变为hello hello world

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.getAttribute():获取元素属性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例

<a id=\"aid\" title=\"得到a的标签属性\"></a>
   <script>
           function getAttr1(){
               var anode=document.getElementById(\"aid\");
               var attr=anode.getAttribute(\"id\");
               alert(\"a的ID是:\"+attr);
            }
           function getAttr2(){
              var anode=document.getElementById(\"aid\");
              var attr=anode.getAttribute(\"title\");
              alert(\"a的title内容是：\"+attr);
           }
            getAttr1();
            getAttr2();
  </script>

结果：弹出提示框“a的ID是：aid”.点击确定后，弹出提示框“a的title内容是：得到a的标签属性”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute()设置元素属性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例

<a id=\"aid2\">aid2</a> 
   <script>
        function setAttr(){
           var anode=document.getElementById(\"aid2\");
           anode.setAttribute(\"title\",\"动态设置a的title属性\");
           var attr=anode.getAttribute(\"title\");
           alert(\"动态设置的title值为：\"+attr);
       }
       setAttr();
   </script>

结果：弹出提示框“动态设置的title值为：动态设置a的title属性”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

5.childNodes():访问子节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~··

例

<ul><li>1</li><li>2</li><li>3</li></ul>
   <script>
           function getChildNode(){
                var childnode=document.getElementsByTagName(\"ul\")[0].childNodes;
                alert(childnode.length);
                alert(childnode[0].nodeType);
           }
          getChildNode();
  </script>

结果：界面打印出.1 .2 .3弹出对话框“3”，按确定后弹出“1”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

6.parentNode():访问父节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

例

<div>
        <p id=\"pid\"></p>
   </div>
   <script>
        function getParentNode(){
            var div=document.getElementById(\"pid\");
            alert(div.parentNode.nodeName);
        }
       getParentNode();
  </script>

结果：弹出提示框：DIV.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

7.createElement():创建元素节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例：

 <script>
       function createNode(){
             var body=document.body;
             var input=document.createElement(\"input\");
             input.type=\"button\";
             input.value=\"按钮\";
             body.appendChild(input);//插入节点
        }
         createNode();
 </script>

结果:出现一个按钮。

~~~~~~~~~~~~~~~~~~~~~~~~~~~

8.createTextNode():创建文本节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例：

    <script>
        function createNode(){
              var element = document.createElement(\"div\");
              element.className = \"message\";
              var textNode = document.createTextNode(\"Hello world!\");
              element.appendChild(textNode);
              document.body.appendChild(element);
        }
      createNode();
   </script>

代码分析：这个例子创建了一个新<div>元素并为它指定了值为“message”的class特性。然后，又创建了一个文本节点，并将其添加到前面创建的元素中。最后一步，就是将这个元素添加到了文档中的<body>元素中，这样可以在浏览器中看到新创建的元素和文本节点了。

结果：页面显示hello world。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

9.insertBefore():插入节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 例

<div id=\"div\">
          <p id=\"pid\">p元素</p>
    </div>
    <script>
        function addNode(){
             var div=document.getElementById(\"div\");
             var node=document.getElementById(\"pid\");
             var newnode=document.createElement(\"p\");
             newnode.innerHTML=\"动态插入一个p元素\";
             div.insertBefore(newnode,node);
        }
        addNode();
    </script>

结果：界面打印出：动态插入一个p元素

                         p元素

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

10.removeChild():删除节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

 例

<div id=\"div\">
          <p id=\"pid\">p元素</p>
    </div>
    <script>
       function removeNode(){
               var div=document.getElementById(\"div\");
               var p=div.removeChild(div.childNodes[1]);
        }
      removeNode();
   </script>

结果：界面什么也没显示。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

11.offsetHeight:网页尺寸

12.scrollHeight:网页尺寸

~~~~~~~~~~~~~~~~~~~~~~~~~~~·

例：

  <script>
      function getSize(){
          var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题
          var height=document.documentElement.offsetHeight||document.body.offsetHeight;
          alert(width+\",\"+height);
      }
      getSize();
 </script>

显示结果：

这篇文章主要介绍了JS DOM 来控制HTML元素，文章内容主要包括关于DOM，HTML等，文章来自网络，请参考。

本文地址：https://www.stayed.cn/item/14574

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案