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操作文档结构

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

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

js操作form表单

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

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

js的document对象及操作相关推荐

JS实现sleep功能 JS遍历document对象
标题:JS实现sleep功能 JS遍历document对象/*****************************************/ var elementName; function c ...
JS中document对象 window对象
所有的全局函数和对象都属于Window对象的属性和方法. 区别: 1.window 指窗体.Window 对象表示浏览器中打开的窗口. document指页面.document是window的一个子对 ...
js－document对象
2019独角兽企业重金招聘Python工程师标准>>> document 对象 http://www.phpx.com/man/dhtmlcn/objects/obj_documen ...
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
1.概念: Document Object Model 文档对象模型:将标记语言文档的各个组成部分,封装为对象.可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作. 通过 HTML D ...
【JavaScript】Document对象学习
Document 对象当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document 对象是 HTML 文档的根节点. Document 对象使我们可以从脚本中对 HTML ...
document对象转字符串
js打印document对象,即document对象转字符串可以用.outerHTML方法如:document.getElementsByClassName("ke-edit-ifram ...
5.14 js对象函数 js操作document对象
---对象 var myObject ={} /* 声明对象字面变量*/ myObject点语法取值赋值代码格式 var person = { name : "zhangs ...
JS中window.document对象
小知识点注:外面双引号,里面的双引号改为单引号: 在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中文本框取出来 ...
0514JS操作document对象、事件、（this）
|js操作document对象 |-找到对象 |--document.getElementById("id名"); 通过id名找到唯一的对象 var duixiang = docu ...
操作document对象练习
对div进行操作document的练习步骤做div------找到要挂事件的div命名它---------挂入事件完成对对象的操作 <style type="text/css&q ...

js的document对象及操作

document对象

js操作HTML元素属性

js操作元素的内容学习

js操作元素的样式

js操作文档结构

js操作form表单

js的document对象及操作相关推荐

最新文章

热门文章