javascript DOM实用学习资料第1/3页

时间:2024-04-25 13:09:44 

访问指定节点:
getElementsByName():

<html> <head> <title>DOM技术</title> </head> <body> <form method="post" action="document.cgi"> <fieldset> <legend>选择你喜欢的颜色!</legend> <input type="radio" name="color" value="red"/>red <input type="radio" name="color" value="green"/>green <input type="radio" name="color" value="blue"/>blue </fieldset> <input type="submit" value="submit"> </form> <script language="javascript"> var oRadios=document.getElementsByName("color"); alert(oRadios[0].getAttribute("value")); </script> </body> </html>



<html> <head> <title>DOM技术</title> </head> <body> <form method="post" action="document.cgi"> <fieldset> <legend>选择你喜欢的颜色!</legend> <input type="radio" name="color" value="red"/>red <input type="radio" name="color" value="green"/>green <input type="radio" name="color" value="blue"/>blue </fieldset> <input type="submit" value="submit"> </form> <script language="javascript"> var oRadios=document.getElementsByName("color"); alert(oRadios[0].getAttribute("value")); </script> </body> </html>



getElementById():

<html> <head> <title> </title> <script type="text/javascript"> function getValue(){ var odiv1=document.getElementById("div1"); odiv1.innerText="hello!"; } </script> </head> <body onload="getValue()"> <div id="div1"></div> </body> </html>



<html> <head> <title> </title> <script type="text/javascript"> function getValue(){     var odiv1=document.getElementById("div1");     odiv1.innerText="hello!"; } </script> </head> <body onload="getValue()"> <div id="div1"></div> </body> </html>



createElement():

<html> <head> <title>创建节点</title> </head> <body onload="createM()"> </body> </html> <script language="javascript"> function createM(){ var op=document.createElement("p"); var otext=document.createTextNode("你好!"); op.appendChild(otext); document.body.appendChild(op); } </script>



<html> <head> <title>创建节点</title> </head> <body onload="createM()"> </body> </html> <script language="javascript"> function createM(){ var op=document.createElement("p"); var otext=document.createTextNode("你好!"); op.appendChild(otext); document.body.appendChild(op); } </script>



removeChild():

<html> <head> <title>删除节点</title> <script language="javascript"> function removeM(){ var op=document.body.getElementsByTagName("p")[0]; document.body.removeChild(op); } </script> </head> <body onload="removeM()"> <p>你好!</p> <p>hello world!</p> </body> </html>



<html> <head> <title>删除节点</title> <script language="javascript"> function removeM(){ var op=document.body.getElementsByTagName("p")[0]; document.body.removeChild(op); } </script> </head> <body onload="removeM()"> <p>你好!</p> <p>hello world!</p> </body> </html>



123下一页阅读全文

标签:javascript,DOM
0
投稿

猜你喜欢

  • SQL实现相邻两行数据的加减乘除操作

    2024-01-24 23:12:34
  • termux中matplotlib无法显示中文问题的解决方法

    2022-12-16 00:07:16
  • 对python添加模块路径的三种方法总结

    2023-11-26 04:01:35
  • python输出决策树图形的例子

    2022-02-07 09:14:54
  • 不是原型继承那么简单!prototype的深度探索

    2008-03-07 12:42:00
  • python 弹窗提示警告框MessageBox的实例

    2023-11-12 01:07:17
  • mysql8.0.12如何重置root密码

    2024-01-19 03:43:03
  • python tkinter实现简单计算器功能

    2022-06-16 22:34:09
  • 封装2个ajax函数

    2010-09-03 18:14:00
  • 解决使用OpenCV中的imread()内存报错问题

    2022-06-06 03:14:21
  • 全面了解python字符串和字典

    2021-05-03 21:06:43
  • TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法

    2021-03-20 19:55:17
  • Python中的min及返回最小值索引的操作

    2023-09-24 08:48:19
  • python实现录屏功能(亲测好用)

    2022-01-12 19:54:34
  • 得到文本框选中的文字,动态插入文字的js代码

    2024-05-03 15:31:03
  • 深入浅析Python科学计算库Scipy及安装步骤

    2022-06-29 12:11:30
  • pycharm console 打印中文为乱码问题及解决

    2023-06-15 22:30:02
  • 使用python编写简单计算器

    2023-08-27 17:07:46
  • 浅谈pytorch卷积核大小的设置对全连接神经元的影响

    2022-08-19 04:49:55
  • python类的方法属性与方法属性的动态绑定代码详解

    2023-07-02 03:31:26
  • asp之家 网络编程 m.aspxhome.com