js的document对象及操作

document对象

			1、document对象的概念
				浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封装HTML的所有信息
			2、使用document
				获取HTML元素对象
					直接获取方式
						通过id:document.getElementById("id");
						通过name属性值:document.getElementByName("name");
						通过标签名:document.getElementByTagName("标签名")
						通过class属性值:document.getElementByClassName("class属性值");
					间接获取方式
						父子关系
						子父关系
						兄弟关系
				操作HTML元素对象的属性

js操作HTML元素属性

			获取元素对象
			操作元素属性
				获取:
					元素对象名.属性名//返回当前属性的属性值---固有
					元素对象名.getAttribute("属性名");//返回自定义的属性的值---自定义
				修改:
					元素对象名.属性名=属性值
					元素对象名.setAttribute("属性名","属性值");//修改自定义的属性的值---自定义
				注意:
					尽量不要去修改元素的id和name属性值

js操作元素的内容学习

			获取元素对象
				获取
					元素对象名.innerHTMl//返回当前元素的所有内容,包括HTML标签
					元素对象名.innerText//返回当前元素的文本内容,不包括HTML标签
				修改
					元素对象名.innerHTML="新的值"//会将元素对象名覆盖,并且HTML标签会被解析
						元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
					元素对象名.innerText="新的值"//会将原有内容覆盖,但HTML标签不会被解析,会作为不同文本添加到页面上。

js操作元素的样式

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

js操作文档结构

			增加节点
			删除节点
			第一种方式:innerHTML
				div.innerHTML=div.innerHTML+"内容"//增加节点
				div.innerHTML="";//删除所有子节点
				父节点.removeChild(子节点对象)//删除指定的子节点对象

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

js操作form表单

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值