js中dom的document对象

最新推荐文章于 2025-05-27 22:09:04 发布

原创最新推荐文章于 2025-05-27 22:09:04 发布 · 460 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #对象 #dom #标签

javascript 专栏收录该内容

16 篇文章

订阅专栏

document对象：表示整个的文档
常用方法：

write方法：向页面输出变量（值）
向页面输出html代码

    document.write("hello");
    document.write("<hr/>");

getElementById()方法：通过id得到元素（标签），向input里面设置一个值value

   //使用getElementById()得到input标签
    var input1=document.getElementById("nameid");
    //得到input里面的value值
    alert(input1.value);
    //向input里面设置一个值value
    input1.value="dddd";

getElementsByName()：通过标签的name的属性值得到标签，返回的是一个集合（数组）

 var input2=document.getElementsByName("name1");
    alert(input2.length);
    //遍历数组
    for (var i=0;i<input2.length;i++ )
    //通过遍历数组，得到每个标签里面的值
    {
    var input3=input2[i];//每次循环得到input对象，赋值到input3
    document.write(input3.value);//得到每个input标签里面的value值
    }

getElementsByTagName(“标签名称”) 通过标签名称得到元素

    var input4=document.getElementsByTagName("input");
     alert(input4.length);
     for (var i=0;i<input4.length;i++ )
    {
    var input5=input4[i];
    document.write(input5.value);
    }

注意的地方
只有一个标签，这个标签只能使用name得到，使用getElementByName返回的是一个数组，但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值。
var input2=document.getElementByName(“name11”)[0];
alert(input2.value);
10.window弹窗案例
实现过程：
创建一个页面
有两个输入项和一个按钮
按钮上有一个事件，弹出一个新窗口open
创建弹出页面
表格
每一个有一个按钮和编号姓名
按钮上有一个事件，把当前的编号和姓名，赋值到第一个页面相应的位置
案例代码：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
 用户编号：<input type="text" id="number" value=""/> <br/>
 用户姓名：<input type="text" id="name" value=""/><br/>
 <input type="button" id="chose" value="选择" onclick="choose();"/>
 <script type="text/javascript">
 function choose(){
     window.open("10-window的open窗.html","","width=200 height=200" );
 }
 </script>
 </body>
</html>

open小窗口代码：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body> 
 <table border="1">
 <tr>
    <td>操作</td>
    <td>编号</td>
    <td>姓名</td>
 </tr>
 <tr>
    <td><input type="button" value="选择" onclick="chose('001','张三');"/></td>
    <td>001</td>
    <td>张三</td>
 </tr>
 <tr>
    <td><input type="button" value="选择" onclick="chose('002','赵四');"/></td>
    <td>002</td>
    <td>赵四</td>
 </tr>
 <tr>
    <td><input type="button" value="选择" onclick="chose('003','王五');"/></td>
    <td>003</td>
    <td>王五</td>
 </tr>
 </table>
 <script type="text/javascript">
 //需要把num和name赋值到weindow窗口
 //跨页面的操作，opener得到创建这个窗口的窗口，得到window页面
function chose(num1,name1){
var pwin=window.opener;
pwin.document.getElementById("number").value=num1;
pwin.document.getElementById("name").value=name1;
window.close();

}
 </script>
 </body>
</html>