如何使用JS中DOM来控制HTML元素

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():访问父节点。

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

例

 p  p id= pid /p  script  function getParentNode(){ var p=document.getElementById( pid  alert(p.parentNode.nodeName); getParentNode(); /script 

结果：弹出提示框：p.

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

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( p  element.className = message  var textNode = document.createTextNode( Hello world!  element.appendChild(textNode); document.body.appendChild(element); createNode(); /script 

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

结果：页面显示hello world。

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

9.insertBefore():插入节点。

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

例

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

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

p元素

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

10.removeChild():删除节点。

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

例

 p id= p  p id= pid p元素 /p  script  function removeNode(){ var p=document.getElementById( p  var p=p.removeChild(p.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 

显示结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP ！

相关推荐：

如何在html中显示JSON数据

以上就是如何使用JS中DOM来控制HTML元素的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。