javascript document javascript document.edit

转载

AIGC创想家 2023-06-05 19:33:15

文章标签 javascript 前端开发语言 html5 HTML 文章分类 JavaScript 前端开发

JavaScript之document对象

一、document对象概念
二、JS获取HTML元素对象

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

1.1 通过id
1.2 通过name
1.3 通过标签名
1.4 通过class属性值
1.5 相关实例一

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

2.1 父子关系
2.2 子父关系
2.3 兄弟关系
2.4 相关实例二

三、JS操作HTML元素属性

1、获取元素属性

1.1 场景一（函数的固有属性）
1.2 场景二（函数的自定义属性）

2、修改元素属性

2.1 场景一（函数的固有属性）
2.2 场景二（函数的自定义属性）

3、使用自定义方式操作固有属性
4、注意
5、实例

四、JS操作HTML元素内容

1、获取元素内容
2、修改元素内容
3、实例

五、JS操作HTML元素样式

1、通过style属性操作元素样式
2、通过className属性操作元素样式
3、实例

六、JS操作HTML的文档结构

1、使用innerHTML操作文档结构
2、实例一
3、通过获取元素对象方式操作文档结构
4、实例二

七、JS操作form表单

1、获取form表单对象

1.1 方式一(使用id)
1.2 方式二(使用name属性)

2、获取form下的所有表单元素对象集合
3、form表单的常用方法
4、form的属性操作
5、实例
6、js表单元素的通用属性

一、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 通过name

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

1.3 通过标签名

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

1.4 通过class属性值

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

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>

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

2.1 父子关系

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

2.2 子父关系

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

2.3 兄弟关系

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

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>

三、JS操作HTML元素属性

1、获取元素属性

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

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

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

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

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

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

2、修改元素属性

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

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

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

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

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

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

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

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

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>

四、JS操作HTML元素内容

1、获取元素内容

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

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

2、修改元素内容

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

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

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

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="<b>我吃西红柿</b>";
			}

            function updateContext2(){
			    //获取元素对象
				var div=document.getElementById("div01");
				//修改元素对象内容
				div.innerText="<b>我吃西红柿</b>";
			}
    </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>

五、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="";
}

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

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

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

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>

六、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 + "<div><input type='file' id=''' value=''/><input type='button' value='删除' οnclick='delInp(this)'/></div>";
        }

        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>

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之操作元素的文档结构2</title>
    <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操作文档结构2</h3>
    <input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
    <hr/>
    <div id="showdiv">

    </div>
</body>
</html>

七、JS操作form表单

1、获取form表单对象

1.1 方式一(使用id)

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

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

1.2 方式二(使用name属性)

var frm = document.frm;

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

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

fm.elements

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

3、form表单的常用方法

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

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

4、form的属性操作

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

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

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>

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

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

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java 执行完任务自动销毁的线程 java线程停止执行

下一篇：如何用python将一几句话反转 python怎么反转

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯