DOM编程(2)

最新推荐文章于 2022-09-30 20:04:44 发布

yanner_

最新推荐文章于 2022-09-30 20:04:44 发布

阅读量229

点赞数

分类专栏： JavaScript 文章标签：对象 dom

本文链接：https://blog.csdn.net/yanner_/article/details/78287904

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.document对象
定义：document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象
write():这个是向文档输出文本或是js代码
writeln():这个是向文档输出文本或是js代码，与write不一样的是writeln是换行输出
open():可打开一个新文档，并擦除当前文档的内容。
close():关闭open()文档流
getElementById():通过html控件的id得到该控件，如果有相同的id则只取第一个
注意：
（1）规定html文档中id最好要唯一，如果不唯一，则只取第一个元素
（2）id不用数字开头
getElementsByName():通过元素的名字返回对象集合
案例：用name取多个元素

function test2(){
    var hobbies=document.getElementsByName("hobby");
    //window.alert(hobbies.length);
    for(var i=0;i<hobbies.length;i++){
        //如何判断是否选择
        if(hobbies[i].checked){
            window.alert("你的爱好是"+hobbies[i].value)
        }
    }
}
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="旅游"/>旅游
<input type="checkbox" name="hobby" value="音乐"/>音乐
<input type="button" value="testing" onclick="test2()"/>

getElementsByTagName():通过html的标签名返回对象集合
案例：通过标签名字获取input集合

        function test3(){
            var myobjs=document.getElementsByTagName("input");
            for(var i=0;i<myobjs.length;i++){
                window.alert(myobjs[i].value);
            }
        }
        <input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="旅游"/>旅游
<input type="checkbox" name="hobby" value="音乐"/>音乐
<input type="button" value="获取所有input" onclick="test3()"/>

createElement():创建一个指定标签名的元素[比如：动态创建超链接]
案例：动态创建超链接和动态删除超链接

function test1(){
    //创建元素
    var myElement=document.createElement("a");//a处写希望创建的html元素标签名
    //给新的元素添加必要的信息
    myElement.href="http://www.sina.com";
    myElement.innerText="连接到sina";
    myElement.id="id1";
    //myElement.style.left="200px";
    //myElement.style.top="300px";
    //myElement.style.position="absolute";
    //添加到document.body
    //document.body.appendChild(myElement);
    //将元素添加到div
    document.getElementById("div1").appendChild(myElement);
}
function test(){
    //删除一个元素
    document.getElementById("div1").removeChild(document.getElementById("id1"));
}
<input type="button" value="动态的创建一个超链接" onclick="test1()"/>
<div id="div1" style="width:200px;height:400px;border:1px solid red"></div>
<input type="button" value="删除一个超链接" onclick="test()"/>

2.dom的node节点
在dom编程中，一个html文档会被当做一个dom树来对待，dom会把所有的html元素映射成node节点，于是就可以使用node节点的属性和方法。
属性名称：
nodeName:节点名称
nodeValue:节点值
nodeType:节点类型
firstChild:第一个子节点
lastChild:最后一个子节点
childNodes:所有子节点
previousSibling:前一个节点
nextSibling:后一个节点
ownerDocument:获得该节点所属的文档对象
attributes:代表一个节点的属性对象
方法名称：
hasChildNodes():当前节点是否有子节点
appendChild(node):往当前节点上添加子节点
removeChild(node):删除子节点
repalceChild(oldNode,new Node):替换子节点
insertBefore(newNode,refNode):在指定节点的前面插入新节点
3.document其他对象
（1）body:body对象代表文档的主体，使用body对象要求文档的主体创建后才能使用。
innerText:某个元素间的文本
innerHtml:某个元素间的html代码
（2）style：表示当前元素的样式设置，style对象和document对象下的集合对象styleSheets有关系，styleSheets是文档中所有style对象的集合。

document.getElementById("id").style.Property="id".style.Property="值" //来控制网页文档的任何一个元素（对象）的样式。

（3）form对象
length:返回大小
item(index):指定取出form对象集合的第几个form对象
说明：当访问某个表单的某个元素的时候，可以document.forms[第几个表单].元素的名字
document.forms.item(第几个表单).元素的名字
表单验证的综合案例：当用户在提交表单的时候，要给出相应的提示信息
这里写图片描述

<html>
<head>
<link rel="stylesheet" type="text/css" href="form.css">
<script type="text/javascript">
function changeAction()
  {
  var x=document.getElementById("myForm")
  alert("Original action: " + x.action)
  x.action="index.asp"
  alert("New action: " + x.action)
  x.submit()
  }

  function checkinfo(){
     span1.innerText="";
     span2.innerText="";
     span3.innerText="";
    //获取表单的用户名
    if(document.forms[0].username.value.length<4||document.forms[0].username.value.length>6){
        span1.innerText="用户名应在4-6位间";
        return false;
    }
    //判断密码是否ok
    if(document.forms[0].pwd1.value.length<=3){
        span2.innerText="密码要求大于3位";
        return false; 
    }
    if(document.forms[0].pwd1.value!=document.forms[0].pwd2.value){
        span3.innerText="输入的两次密码不一样";
        return false;
    }
  }
</script>
</head>
<body>
<h1>用户注册</h1>
<form action="">
<table border=0>
<tr><td class="td1">用户名</td><td class="td2"><input class="style1" type="text" name="username"/><span id="span1"></span></td></tr>
<tr><td>密  码</td><td><input class="style1" type="password" name="pwd1"/><span id="span2"></span></td></tr>
<tr><td>确认密码</td><td><input class="style1" type="password" name="pwd2"/><span id="span3"></span></td></tr>
<tr><td>年   龄</td><td><input class="style1" type="text" name="age"/></td></tr>
<tr><td>电子邮件</td><td><input class="style1" type="text" name="email"/></td></tr>
<tr><td>电话号码</td><td><input class="style1" type="text" name="phone"/></td></tr>
<tr><td><input type="submit" onclick="return checkinfo()" value="注册新用户"/></td><td><input type="reset" value="重新填写"/></td></tr>
</table>
</body>
</html>

说明：在验证表单的时候，可以有两种方式：

<form action="" onsubmit="函数"/>
或<input type="submit" onclick="函数"/>

yanner_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM编程(2)

1.document对象定义：document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象 write():这个是向文档输出文本或是js代码 writeln():这个是向文档输出文本或是js代码，与write不一样的是writeln是换行输出 open():可打开一个新文档，并擦除当前文档的内容。 close():关闭open()文档流 getElem
复制链接

扫一扫