JavaScript的document操作元素，文档结构，form表单

十一、document对象的学习

1、document对象的概念

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

使用document获取元素对象

直接获取方式

通过id

通过name属性值

通过标签名

通过class属性值

2、操作元素的属性和对象

获取：

1）元素对象名.属性名//返回当前属性的属性值。—-固有

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

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

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

注意：尽量的不要去修改元素的id值和name属性值。

使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据。

获取：元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签

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

修改：元素对象名.innerHTML=”新的值”//会将原有内容覆盖，并HTML标签会被解析

元素对象名.innerHTML=元素对象名.innerHTML+”新的值”//追加效果

元素对象名.innerText=”新的值”//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。

3、js操作元素样式

通过style属性

元素对象名.style.样式名=”样式值”//添加或者修改

元素对象名.style.样式名=”“//删除样式

注意:以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。

通过className

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

元素对象名.className=”“//删除类样式。

4、js操作HTML文档结构:

增加节点

删除节点

div.innerHTML=div.innerHTML+”内容”//增加节点

div.innerHTML=”“//删除所有子节点

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

var obj=document.createElement(“标签名”);

元素对象名.appendChild(obj);

5、js操作form表单

获取form表单对象

使用id:var fm=document.getElementById(“fm”);

使用name属性:var frm=document.frm;

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

fm.elements

form表单的常用方法

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

form的属性操作：

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

表单对象名.method=”新的值”//动态的改变提交方式

只读模式:readonly=”readonly”//不可以更改，但是数据可以提交

关闭模式：disabled=”disabled”//不可以进行任何的操作，数据不会提交。