DOM(Document Object Model)
DOM(Document Object Model):
结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。
结点类型
1.元素结点
对于元素结点的nodeName就是标签名(大写),而nodeValue就是null或undefined(除了标签名,啥也没有,nodeValue 就不可能有值)
<p id="ptag">this is a p tag</p> <script>
nodeObj = document.getElementById("ptag");
console.log(nodeObj.nodeName);//result:P(注意:是大写)
console.log(nodeObj.nodeValue);//result:null
</script>
2.属性结点
一个属性就是一个属性结点,例如<p id=”ptag”>this is a p tag</p> 的id属性结点表示方法就是:
document.getElementById("ptag").getAttributeNode("id")
而属性结点的nodeName就是属性名(key),nodeValue就是属性值(value)
<p id="ptag">this is a p tag.</p>
<script>
nodeObj = document.getElementById("ptag");
idAttributeNode = nodeObj.getAttributeNode("id");
//从结点对象获得id属性结点
console.log(idAttributeNode.nodeName);//result:id
console.log(idAttributeNode.nodeValue);//result:ptag
</script>
3.文本结点
一个元素的子结点可以分为两类:文本结点和元素结点
所以文本结点就得重新定义:文本结点就是元素起始标签和闭合标签内的不加其他标签修饰的文本内容
因此,文本结点的nodeValue就是文本内容,而nodeName都是#text
<p id="ptag">this is a p tag.</p> <script>
nodeObj = document.getElementById("ptag");
textNode = nodeObj.childNodes[0];//从结点对象获得文本结点
console.log(textNode.nodeName);//result:#text
console.log(textNode.nodeValue);
//result:this is a p tag.
</script>
结点的注意点:
1.文本节点和属性结点都看作元素结点的子结点
2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用“结点”称呼它
3.结点的关系有:父子关系、兄弟关系
1.获取元素结点
1)直接获取
① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()
2)间接获取
父子关系
firstChild lastChild childNodes
子父关系
parentNode
兄弟关系
nextSibling previousSibling
2.操作属性结点
1)通过对象“.”属性,来操作属性
优:可以动态获取用户修改的属性值
缺:不能获取自定义属性的值
2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
优:可以获取自定义属性的值
缺:不能动态获取用户修改的属性值
3.处理文本结点
1) 通过对象.innerText 获取标签内部的文本信息
2) 通过对象.innerHTML 获取标签内部的HTML代码
4.动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)
3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)
4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)
5)(父结点)删除旧子结点对象
fahterNode.removeChild(旧结点对象)
5.动态改变元素的CSS样式(不重要)
1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称
2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)
<table id="tableid" border="1" style="border-collapse: collapse">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr id="r1">
<td>张三</td>
<td>18</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr id="r2">
<td>李四</td>
<td>19</td>
<td>女</td>
<td><a href="javascript:void(0)" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr id="r3">
<td>王五</td>
<td>20</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>
<script type="application/javascript">
function deleteRow(item){
var delNode = item.parentNode.parentNode;
var fatherNode = delNode.parentNode;
fatherNode.removeChild(delNode)
}
</script>
6.表单操作
1)表单获取方式
1.document.getElementById()
2.document.forms[index];
3.document.forms[form_name]
4.document.form_name
2)表单对象的属性
id
name
action
method
get方式和post方式的区别
1.get方式会将提交的数据以(?name1=value1&name2=value2...)放在url后面
post方式会将数据以(name1=value1&name2=value2...)放在“请求实体”中
2.get将数据放在url后,由于url是有长度的,且url是可见,所以get方式不适合发送一些敏感数据
post方式将数据放在“请求实体”中,理论上是无限制,post方式适合发送一些敏感数据
3.get方式请求会有缓存
post方式请求不会有缓存
enctype
1.application/x-www-form-urlencoded(默认、且常用)
无论post方式还是get方式提交,表单数据均以(name1=value1&name2=value2...)组织数据
2.multipart/form-data(表单上传文件时)
1)get方式,表单以(name1=value1&name2=value2...)组织数据
2)post方式,表单数据会放在类似于“------WebKitFormBoundaryGSF0lHBAvwWyAcuV”字符串中间
3.text/plain
1)get方式,表单以(name1=value1&name2=value2...)组织数据
2)post方式,表单数据会以name1=value2,name2=value2,数据之间没有连接符号
3)表单对象的方法
submit()
reset()
4)表单对象的事件
1.对于表单中设置的提交、重置按钮,会触发onsubmit事件、onreset事件
2.在表单外部通过submit()提交表单不会触发onsubmit事件
3.在表单外部通过reset()重置表单会触发onreset事件
4.我们将onsubmit事件、onreset事件返回一个false就可以阻止事件的执行 7.表单域操作
1)获取表单域对象
1.document.getElementById()
2.formObj.elements[index]
3.formObj.elements[formarea_name]
4.formObj.formarea_name
2)表单域对象的属性
1.readonly
1)input对象 设置了readonly="readonly",则该表单域只读(用户不能修改其value属性),但是可以提交
2)通过js为input对象添加“只读”属性,应通过“对象.readOnly = true”添加
3)readonly="readonly" 只能使用在<input type='text'> 及 <textaread>标签中
2.disabled
1)input对象 设置了disabled="disabled",则该表单域不可用(用户不能修改其value属性)且不能提交
2)通过js为input对象添加“不可用”属性,应通过“对象.disabled = true”添加
3)disabled="disabled"可以将所有的表单域失效
3.name
1)用于获取该表单域
2)只有设置了name属性的表单域才可以提交
4.value
1)用户输入的内容就是value,表单会提交该属性的值
2)select标签的value值就是当前选中的option的value值
3)textarea没有value属性,提交时提交标签中间的文本值
5.form
用于获取表单域所在的表单对象
6.type
浏览会根据type的值不同,显示表单域也不同
7.checked
1)对于<input type="radio"> 和 <input type="checkbox">来讲,checked="checked"表示默认选中该选项
2)<input type="radio"> 只能给同组的一个添加 checked="checked"
3)<input type="checkbox"> 可以给同组的所有添加 checked="checked"
4)通过js为对象添加“默认选中”属性,应通过“对象.checked = true”添加
8.select标签的属性
1)selectedIndex表示当前选中的option的索引
2)options表示所有option标签对象的一个数组
3)length表示右多少个下拉列表项
9.option标签的属性
1)value 就是选项的值,提交时会提交该属性的值
2)text 就是option标签中间文本值,类似于innerText
3)selected="selected" 表示页面加载时默认的选项
3)表单域对象的方法
onfocus()
onblur()
4)表单域对象的事件
不同表单域对象常用的事件不同,参考js事件
DOM(Document Object Model)的更多相关文章
- DOM (文档对象模型(Document Object Model))
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
- 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- javascript之DOM(Document Object Model) 文档对象模型
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 文本对象模型(Document Object Model)
本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...
- DOM (Document Object Model)文档对象模型
[理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...
- (3)选择元素——(2)文档对象模型(The Document Object Model)
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy ...
- DOM - Document Object Model
Document Object Model
- XML DOM(Document Object Model)
1.XML DOM 是用于获取.更改.添加或删除 XML 元素的标准.2.节点(XML 文档中的每个成分都是一个节点): 整个文档是一个文档节点: 每个XML元素是一个元素 ...
- BOM—Browser Object Model and DOM—Document Object Model
浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括do ...
随机推荐
- spring boot redis 缓存(cache)集成
Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...
- XML--XSL
参考 http://blog.51cto.com/cnn237111/1345998 https://www.w3.org/TR/2017/REC-xslt-30-20170608/ 声明 把文档声明 ...
- 家中WIFI被人用WiFi万能钥匙共享后,我们应该怎么做?
据之前WiFi万能钥匙官方称,其用户总数已经超过了8亿,且日活用户达到2亿,在海量APP中仅次于微信和QQ.可以想象有着数量如此庞大的用户,家里的WiFi是如何的"不保险". 而据 ...
- nginx重写常用写法
1.将http协议重写成https协议: (用户用http进行访问,但后端是https),则可添加80 http端口监听,然后进行https rewrite; server { listen ...
- servlet-api api文档获取请求参数
1.假如有个get请求后面带有的参数如下: a=b&a2=b2&a3=b3&a4=b4. 如果想获取所有的key,value.这个时候可以根据request的getQueryS ...
- python之路(dingo 框架)
Python之路 转载自QIMI老师 Python之路 第一篇:Python基础 PyCharm使用秘籍免费视频教程v3 ... 迭代器生成器 模块和常用内置模块 面向对象 面向对象进阶 网络编程 ...
- VUE 引用公共样式
首先创建公共样式文件 在main.js中引用样式 浏览器效果图
- UML的用例图
1.概念理解 (1)用例图是UML多种图形语言的一种,最能体现系统结构,直观展现系统功能模块模型 (2)用例图用于描述用户与用例(角色与功能模块)之间的关联关系 (3)常用Power Designer ...
- 2. Rabbitmq php 安装 amqp 拓展
记录一下 使用 rabbitmq 安装 amqp 拓展 环境 ubuntu 安装目录在 /user/local 下进行 1. 安装 wget apt-get update apt-get inst ...
- keil5最新破解教程(可以使用到2032年哦!):
keil5最新破解教程(可以使用到2032年哦!): 首先附上破解软件下载链接:https://github.com/lzfyh2017/keil5- 相信不少小伙伴使用的keil5都快要到期了,那么 ...