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)的更多相关文章

  1. DOM (文档对象模型(Document Object Model))

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  2. 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  3. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. 文本对象模型(Document Object Model)

    本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...

  5. DOM (Document Object Model)文档对象模型

    [理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...

  6. (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 ...

  7. DOM - Document Object Model

    Document Object Model

  8. XML DOM(Document Object Model)

    1.XML DOM 是用于获取.更改.添加或删除 XML 元素的标准.2.节点(XML 文档中的每个成分都是一个节点):        整个文档是一个文档节点:        每个XML元素是一个元素 ...

  9. BOM—Browser Object Model and DOM—Document Object Model

    浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括do ...

随机推荐

  1. maven学习(三)-使用maven来创建项目

    转自https://www.cnblogs.com/xdp-gacl/p/4240930.html maven作为一个高度自动化构建工具,本身提供了构建项目的功能,下面就来体验一下使用maven构建项 ...

  2. 吴裕雄--天生自然 PHP开发学习:PHP编程基础知识

    <?php $x=5; $y=6; $z=$x+$y; echo $z; ?> <?php $txt="Hello world!"; $x=5; $y=10.5; ...

  3. 四、Antd组件扩展

    注意:先安装扩展,在安装antd框架,否则会提示 一.安装扩展 1.组件 dva 查看项目依赖 原因是我全局安装,依赖为空, npm i dva 查看依赖 cli装global 当访问报错: Warn ...

  4. C语言之结构体概述

    C语言之结构体概述1.结构体类型是一种自定义类型(1)C语言中有2种类型:原生类型和自定义类型.2.结构体使用时先定义结构体类型再用类型定义变量(1)结构体定义时需要先定义结构体类型,再用类型来定义变 ...

  5. mysql字符类型总结及常用字符函数

    常用字符串函数: concat(s1,s2,s3..)       连接s1,s2,...sn为一个字符串 INSERT(str,x,y,instr)将字符串str从x位置开始,y个字符串替换为字符串 ...

  6. 期末项目之 Json文件

    Github上的json文件: https://raw.githubusercontent.com/color-me/first/master/b

  7. .NET CORE 获取微信支付回调

    1.获取微信支付的回调的数据 Stream stream = HttpContext.Request.Body; byte[] buffer = new byte[HttpContext.Reques ...

  8. kafka分区选主机制

    Kafka Partition Leader选主机制 https://blog.csdn.net/qq_27384769/article/details/80115392 kafka leader选举 ...

  9. jupyter notebook 安装配置使用,+目录插件安装

    1.安装 pip3 install jupyter 2.配置 2.1. 生成一个 notebook 配置文件 jupyter notebook --generate-config /root/.jup ...

  10. this深度面试题2

    var name = "windows" var object = { name:"object", show:function(){ return funct ...