• JavaScript之document对象最常用相关知识总结

    JavaScript之document对象

    一、document对象概念

    浏览器对外提供的支持js的用来操作HTML文档的一个document对象，此对象封存的HTML文档的所有信息，浏览器在执行时，到达有document代码这一行，操作的不是原HTML文档，而是事先封装的document对象。

    二、JS获取HTML元素对象

    1、直接方式获取HTML元素对象

    1.1 通过id

    //id方式
function testGetEleById(){
      var inp = window.document.getElementById("uname");
      alert(inp);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    1.2 通过name

    //name方式
function testGetEleByName(){
      var favs = document.getElementsByName("fav" );
      alert(favs.length);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    1.3 通过标签名

    //标签名
function testGetEleByTagName(){
      var inps = document.getElementsByTagName("input");
      alert(inps.length);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    1.4 通过class属性值

    //class属性
function testGetEleByClassName(){
      var inps = document.getElementsByClassName("common");
      alert(inps.length);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    1.5 相关实例一

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之document对象学习title>
    <script>
        //document获取元素对象
            //直接方式
            //id方式
            function testGetEleById(){
                var inp = window.document.getElementById("uname");
                alert(inp);
            }
            //name方式
            function testGetEleByName(){
                var favs = document.getElementsByName("fav" );
                alert(favs.length);
            }
            //标签名
            function testGetEleByTagName(){
                var inps = document.getElementsByTagName("input");
                alert(inps.length);
            }
            //class属性
            function testGetEleByClassName(){
                var inps = document.getElementsByClassName("common");
                alert(inps.length);
            }
    script>
    <style>
        .common{}
        #showdiv{
            border: solid 1px orange;
            width:300px;
            height:300px;
        }
    style>
head>
<body>
    <h3>document对象的概念和获取元素对象的学习h3>
    <input type="button" name="" id="" value="测试获取HTML元素对象--id" onclick="testGetEleById()"/>
    <input type="button" name="" id="" value="测试获取HTML元素对象--name" onclick="testGetEleByName()"/>
    <input type="button" name="" id="" value="测试获取HTML元素对象--TagName" onclick="testGetEleByTagName()"/>
    <input type="button" name="" id="" value="测试获取HTML元素对象--className" onclick="testGetEleByClassName()"/>
    <hr/>
        用户名：<input type="text" name="uname" id="uname" value=""/><br/><br/>
        <input type="checkbox" name="fav" id="fav" value="" class="common"/> 唱歌
        <input type="checkbox" name="fav" id="fav" value="" class="common"/> 跳舞
        <input type="checkbox" name="fav" id="fav" value=""/> 睡觉
        <input type="checkbox" name="fav" id="fav" value=""/> 打游戏
    <hr/>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    2、间接方式获取HTML元素对象

    2.1 父子关系

    //父子关系
function testParent(){
        //获取父级元素对象
        var showdiv = document.getElementById("showdiv");
        //获取所有的子元素对象数组
         var childs = showdiv.childNodes;
         alert(childs.length);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.2 子父关系

    //子父关系
function testChild(){
      //获取子元素对象
      var inp = document.getElementById("inp");
      //获取子元素的父级元素对象
      var div = inp.parentNode;
      alert(div);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.3 兄弟关系

    //兄弟关系
function testBrother(){
      //兄获取弟
      var inp = document.getElementById("inp");
      var preEle = inp.previousSibling; //弟获取兄
      var nextEle = inp.nextSibling;  //兄获取弟
      alert(preEle + ":::" + nextEle);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.4 相关实例二

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之document对象学习title>
    <script>
        //document获取元素对象
        //间接获取方式
            //父子关系
                function testParent(){
                    //获取父级元素对象
                    var showdiv = document.getElementById("showdiv");
                    //获取所有的子元素对象数组
                    var childs = showdiv.childNodes;
                    alert(childs.length);
                }
            //子父关系
                function testChild(){
                    //获取子元素对象
                        var inp = document.getElementById("inp");
                        var div = inp.parentNode;
                        alert(div);
                }
            //兄弟关系
                function testBrother(){
                    //兄获取弟
                    var inp = document.getElementById("inp");
                    var preEle = inp.previousSibling; //弟获取兄
                    var nextEle = inp.nextSibling;  //兄获取弟
                    alert(preEle + ":::" + nextEle);

                }
    script>
    <style>
        .common{}
        #showdiv{
            border: solid 1px orange;
            width:300px;
            height:300px;
        }
    style>
head>
<body>
  <h3>document对象的概念和获取元素对象的学习h3>
    间接获取方式<br/>
    <input type="button" name="" id="" value="测试父子关系" onclick="testParent()"/>
    <input type="button" name="" id="" value="测试子父关系" onclick="testChild()"/>
    <input type="button" name="" id="" value="测试兄弟关系" onclick="testBrother()"/>
    <hr/>
    <div id="showdiv">
        <input type="" name="" id="" value=""/>
        <input type="" name="" id="inp" value=""/>
        <input type="" name="" id="" value=""/>
        <input type="" name="" id="" value=""/>
        <input type="" name="" id="" value=""/>
        <input type="" name="" id="" value=""/>
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    三、JS操作HTML元素属性

    1、 获取元素属性

    1.1 场景一（函数的固有属性）

    元素对象名.属性名 //返回当前属性的属性值

    function testField(){
    //获取元素对象
    var inp = document.getElementById("uname");
    //获取元素属性值
    alert(inp.value);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    1.2 场景二（函数的自定义属性）

    元素对象名.getAttribute(“属性名”); //返回自定义属性的值------自定义

    function testOwnField(){
      //获取元素对象
      var inp = document.getElementById("uname");
      //获取自定义属性的值(自己定义了一个abc)
      alert(inp.getAttribute("abc"));
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、修改元素属性

    2.1 场景一（函数的固有属性）

    元素对象名.属性名 = 属性值

    function testField2(){
     //获取元素对象
     var inp = document.getElementById("uname");
     //修改元素属性
     inp.value = "哈哈";
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2.2 场景二（函数的自定义属性）

    元素对象名.setAttribute(“属性名”,“属性值”); //修改自定义属性的值------自定义

    function testOwnField2(){
    //获取元素
    var inp = document.getElementById("uname");
    //修改自定义属性的值
    inp.setAttribute("abc","吃饭");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3、使用自定义方式操作固有属性

    //使用自定义方式操作固有属性
function testOper(){
       //获取元素对象
       var inp = document.getElementById("uname");
       //操作对象固有属性
       alert(inp.getAttribute("value"));
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4、注意

    尽量不要去修改元素的id值和name属性值
    使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据

    5、实例

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之操作HTML的元素属性title>
    <script>
        //声明函数---固有属性
            function testField(){
                //获取元素对象
                var inp = document.getElementById("uname");
                //获取元素属性值
                alert(inp.type + ":" + inp.name + ":" + inp.id + ":" + inp.value);
                alert(inp.aa);
            }

            function testField2(){
                //获取元素对象
                    var inp = document.getElementById("uname");
                //修改元素属性
                    inp.value = "哈哈";
                    inp.type = "button";
            }
        //声明函数---自定义属性
            function testOwnField(){
                //获取元素对象
                var inp = document.getElementById("uname");
                //获取自定义属性的值
                alert(inp.getAttribute("abc"));
            }

            function testOwnField2(){
                //获取元素
                var inp = document.getElementById("uname");
                //修改自定义属性的值
                inp.setAttribute("abc","吃饭");
            }
        //使用自定义方式操作固有属性
            function testOper(){
                //获取元素对象
                var inp = document.getElementById("uname");
                //操作对象属性
                alert(inp.getAttribute("type"));
                alert(inp.getAttribute("value"));
            }
    script>
head>
<body>
    <h3>js操作HTML元素属性h3>
    <input type="button" name="" id="" value="测试获取元素属性--固有" onclick="testField()"/>
    <input type="button" name="" id="" value="测试修改元素属性--固有" onclick="testField2()"/>
    <input type="button" name="" id="" value="测试获取元素属性--自定义" onclick="testOwnField()"/>
    <input type="button" name="" id="" value="测试修改元素属性--自定义" onclick="testOwnField2()"/>
    <input type="button" name="" id="" value="测试操作元素自定义操作固有属性" onclick="testOper()"/>
    <hr/>
    用户名：<input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    四、JS操作HTML元素内容

    1、获取元素内容

    元素对象名.innerHTML //返回当前元素对象的所有内容，包括HTML标签
    元素对象名.innerText //返回当前元素对象的文本内容，不包括HTML标签

    function getContext(){
     //获取元素对象
     var div = document.getElementById("div01");
     //获取元素内容
     //innerHTML获取所有内容
     alert(div.innerHTML);
     //innerText获取所有文本内容
     alert(div.innerText);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2、修改元素内容

    元素对象名.innerHTML=“新的值” //会将原有内容覆盖，并HTML标签会被解析
    元素对象名.innerHTML=元素对象名.innerHTML+“新的值” //追加效果
    元素对象名.innerText=“新的值” //会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示 0-*

    function updateContext(){
		  //获取元素对象
			var div=document.getElementById("div01");
			//修改元素对象内容
			div.innerHTML="我吃西红柿";
}

function updateContext2(){
			//获取元素对象
			var div=document.getElementById("div01");
			//修改元素对象内容
			div.innerText="我吃西红柿";
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3、实例

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
  <title>JavaScript之操作元素内容学习title>
    <style type="text/css">
        #div01{
            width:200px;
            height:200px;
            border: solid 1px orange;
        }
    style>
    <script>
        //获取元素内容
            function getContext(){
                //获取元素对象
                var div = document.getElementById("div01");
                //获取元素内容
                //innerHTML获取所有内容
                alert(div.innerHTML);
                //innerText获取所有文本内容
                alert(div.innerText);
            }
        //修改元素内容
            function updateContext(){
				//获取元素对象
				var div=document.getElementById("div01");
				//修改元素对象内容
				div.innerHTML="我吃西红柿";
			}

            function updateContext2(){
			    //获取元素对象
				var div=document.getElementById("div01");
				//修改元素对象内容
				div.innerText="我吃西红柿";
			}
    script>
head>
<body>
    <h3>js操作元素内容学习h3>
    <input type="button" name="" id="" value="测试获取元素---innerHTML&innerText" onclick="getContext()" />
    <input type="button" name="" id="" value="测试修改元素内容--innerHTML"  onclick="updateContext()"/>
    <input type="button" name="" id="" value="测试修改元素内容--innerText"  onclick="updateContext2()"/>
    <hr/>
    <div id="div01">
        <b>西瓜b>
        <b>香蕉b>
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    五、JS操作HTML元素样式

    1、通过style属性操作元素样式

    元素对象名.style.样式名=“样式值” //添加或者修改
    元素对象名.style.样式名=“” //删除样式
    注意: 以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。

    //js给元素添加样式--style
function testAddCss(){
       //获取元素对象
       var showdiv = document.getElementById("showdiv");
       //添加元素样式
       showdiv.style.backgroundColor = "#FFA500";
       //js修改元素样式
			 showdiv.style.border="solid 2px red";
			 //js删除样式
			 showdiv.style.border="";
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    2、通过className属性操作元素样式

    元素对象名.className=“新的值” //添加类选择器样式或者修改类选择器样式
    元素对象名.className=“” //删除类样式

    //js操作样式--className
function testOperCss2(){
				//获取元素对象
				var div01=document.getElementById("div01");
				//获取
				alert(div01.className);
				//添加或者修改
				div01.className="common2";
				//删除
				//div01.className="";
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    3、实例

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之输入输出语句title>
    <style type="text/css">
        #showdiv{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
        .common{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
        .common2{
            width: 200px;
            height: 200px;
            border: solid 1px;
            background-color: aqua;
        }
    style>
    <script>
        //js操作元素样式
            //js给元素添加样式--style
                function testAddCss(){
                    //获取元素对象
                    var showdiv = document.getElementById("showdiv");
                    //添加元素样式
                    showdiv.style.backgroundColor = "#FFA500";
                    //js修改元素样式
			  	          showdiv.style.border="solid 2px red";
			  	          //js删除样式
			  	          showdiv.style.border="";
                }
            //js操作样式--className
                function testOperCss2(){
                   //获取元素对象
                   var div01=document.getElementById("div01");
                   //获取
                   alert(div01.className);
                   //添加或者修改
                   div01.className="common2";
                   //删除
                   //div01.className="";
                }
    script>
head>
<body>
    <h3>js操作元素的样式h3>
    <input type="button" name="" id="" value="测试添加元素样式--style" onclick="testAddCss()"/>
    <input type="button" name="" id="" value="测试操作元素样式-className" onclick="testOperCss2();" />
    <hr/>
    <div id="showdiv" style="border:solid 2px blue;">
    div>
    <div id="div01"class="common">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    六、JS操作HTML的文档结构

    1、使用innerHTML操作文档结构

    div.innerHTML=div.innerHTML+“内容” //增加节点
    div.innerHTML=“” //删除所有子节点
    父节点.removeChild(子节点对象) //删除指定的子节点

    2、实例一

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之操作元素的文档结构title>
    <script>
        function testAdd(){
            //获取元素对象
            var showdiv = document.getElementById("showdiv");
            //给div追加上传按钮
            showdiv.innerHTML = showdiv.innerHTML + "
    "    ;
        }

        function delInp(btn){
            //获取父级div
            var showdiv = document.getElementById("showdiv");
            //获取要删除的子div
            var cdiv = btn.parentNode;
            //父div删除子div
            showdiv.removeChild(cdiv);

        }
        script>
head>
<body>
    <h3>js操作元素的文档结构h3>
    <input type="button" name="" id="" value="继续上传" onclick="testAdd()"/>
    <div id="showdiv">
        
    div>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    3、通过获取元素对象方式操作文档结构

    var obj = document.createElement(“标签名”);
    元素对象名.appendChild(obj);

    4、实例二

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之操作元素的文档结构2title>
    <script>
        function testOper2(){
            //获取元素对象
            var showdiv = document.getElementById("showdiv");
            //创建input元素对象
            var inp = document.createElement("input");
            inp.type = "file";
            //创建按钮元素对象
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "删除";
            btn.onclick=function(){
                showdiv.removeChild(inp);
                showdiv.removeChild(btn);
                showdiv.removeChild(br);
            }
            //创建换行符
            var br = document.createElement("br");
            //将创建的元素对象存放到div中
            showdiv.appendChild(inp);
            showdiv.appendChild(btn);
            showdiv.appendChild(br);
        }
    script>
head>
<body>
    <h3>js操作文档结构2h3>
    <input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
    <hr/>
    <div id="showdiv">

    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    七、JS操作form表单

    1、获取form表单对象

    1.1 方式一(使用id)

    var fm = document.getElementById(“fm”);

    //获取form表对象
var fm = document.getElementById("fm");
alert(fm);

    • 1
    • 2
    • 3

    1.2 方式二(使用name属性)

    var frm = document.frm;

    //使用form表单的name属性值来获取
var frm = document.frm;
alert(frm);

    • 1
    • 2
    • 3

    2、获取form下的所有表单元素对象集合

    fm.elements

    //获取form表单元素对象集合
alert(fm.elements.length);

    • 1
    • 2

    3、form表单的常用方法

    表单对象.submit(); //提交表单数据

    //form表单的常用方法
fm.submit();  

    • 1
    • 2

    4、form的属性操作

    表单对象名.action=“新的值” //动态的改变数据的提交路径
    表单对象名.method=“新的值” //动态的改变提交方式

    fm.action="http://www.baidu.com";

    • 1

    5、实例

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之操作form表单title>
    <script>
        function testForm(){
            //获取form表对象
                var fm = document.getElementById("fm");
                alert(fm);
            //使用form表单的name属性值来获取
                var frm = document.frm;
                alert(frm);
                alert(frm===fm);
            //获取form表单元素对象集合
                alert(fm.elements.length);
            //form表单的常用方法
                //fm.submit();  
                fm.reset();
            //form的属性操作
                fm.action="http://www.baidu.com";
        }
    script>
head>
<body>
    <h3>js操作form表单h3>
    <hr/>
    <input type="button" name="" id="" value="测试操作form" onclick="testForm()"/>
    <hr/>
    <form action="#" method="get" id="fm" name="frm">
        <b>用户名：b><input type="text" name="uname" id="uname" value="" readonly="readonly"/><br/><br/>
        密码：<input type="password" name="pwd" id="pwd" value="" disabled="disabled"/><br/><br/>
        <input type="submit" name="" id="" value="登录"/>
    form>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    6、js表单元素的通用属性

    只读模式
readonly = "readonly"  //不可以更改，但是数据可以提交
关闭模式
Sdisabled = "disabled"  //不可以进行任何的操作，数据不会提交

    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    http在安卓9.0以上版本无法获取数据问题（备忘）
    Spring 事务和事务传播机制
    软件测试/测试开发丨Web自动化 测试用例流程设计
    c语言练习64:calloc和realloc
    第一次笔记：计算机硬件的工作原理 主存储器 运算器 控制器 计算机的工作过程 计算机系统的层次结构 三种级别的语言
    因为模型参数量小，仅考虑该模型是否成功被调用）（如果没有渠道打开Huggingface，可以用其镜像网站hf-mirror代替，如何解决？
    Leetcode 795. 区间子数组个数
    1.3 常规信息系统集成技术
    WireGuard Over VLESS——一个更稳定的三层隧道
    64.【冒泡排序与选择排序与malloc(）函数】
  • 原文地址：https://blog.csdn.net/qq_46106857/article/details/126687299