JavaScript中document对象的常用方法

Posted 2021-03-16 想和你一起吹吹风

document对象的概念
浏览器对外提供的支持js的用来操作html文档的一个对象，此对象封存的HTML文档的所有信息。

1、使用document获取HTML元素对象

　　直接获取方式：
　　　　通过id： window.document.getElementById("id值")
　　　　通过name属性值：document.getElementsByName("name值")
　　　　通过标签名：document.getElementsByTagName("属性名")
　　　　通过class属性值：document.getElementsByClassName("class值")
　　间接获取方式：
　　父子关系：获取父级元素对象

　　　　　　　　　var showdiv=document.getElementById("id值");
　　　　　　　获取所有的子元素对象数组
　　　　　　　　　var childs=showdiv.childNodes;

　　子父关系:获取子元素对象

　　　　　　　　var inp=document.getElementById("id值");

　　　　　　 获取父级元素对象

　　　　　　　　var div=inp.parentNode;

　　兄弟关系：var inp=document.getElementById("id的值");

　　　　　　　var preEle= inp.previousSibling;//弟获取兄
　　　　　　　var nextEle=inp.nextSibling;//兄获取弟

2、js操作HTML元素属性

　　获取元素对象
　　操作元素属性
　　获取：
　　　　元素对象名.属性名//返回当前属性的属性值。----固有
　　　　元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义
　　修改
　　　　元素对象名.属性名=属性值
　　　　元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值----自定义
　　注意：
　　　　尽量的不要去修改元素的id值和name属性值。
　　　　使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据。

3、操作元素内容：

　　获取元素对象
　　　　获取
　　　　　　元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
　　　　　　元素对象名.innerText//返回当前元素对象的文本内容，不包括HTML标签
　　　　修改
　　　　　　元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会被解析
　　　　　　元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
　　　　　　元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。

4、js操作元素样式：

　　获取元素对象
　　　　通过style属性
　　　　　　元素对象名.style.样式名="样式值"//添加或者修改
　　　　　　元素对象名.style.样式名=""//删除样式
　　注意:
　　　　以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
　　通过className
　　　　元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式(通过修改class的值，来调用先写好的css样式)
　　　　元素对象名.className=""//删除类样式。

5、js操作HTML文档结构:

　　　　1）增加节点
　　　　第一种方式：使用innerHTML
　　　　div.innerHTML=div.innerHTML+"内容"//增加节点

　　 1）删除节点
　　　　div.innerHTML=""//删除所有子节点
　　　　父节点.removeChild(子节点对象)//删除指定的子节点。

　　2）增加节点

　　　　获取元素对象var obj=document.createElement("标签名");
　　　　元素对象名.appendChild(obj);

　　2）删除节点

　　　　父节点.removeChild(子节点对象)//删除指定的子节点。

6、js操作form:

　　获取form表单对象
　　　　使用id:var fm=document.getElementById("id值");
　　　　使用name属性:var frm=document.name值;
　　获取form下的所有表单元素对象集合：fm.elements
　　form表单的常用方法
　　　　表单对象.submit();//提交表单数据。
　　form的属性操作：
　　　　表单对象名.action="新的值"//动态的改变数据的提交路径
　　　　表单对象名.method="新的值"//动态的改变提交方式
　　js表单元素的通用属性
　　　　只读模式:
　　　　　　readonly="readonly"//不可以更改，但是数据可以提交
　　　　关闭模式：
　　　　　　disabled="disabled"//不可以进行任何的操作，数据不会提交。

　　js操作多选框、单选框
　　　　被选中状态下在js中checked属性值为true,未选中状态为false;
　　js操作下拉框：
　　　　被选择的option对象在js中selected属性值为true，未选中为false