dom对象:document object model文档对象模型
文档:超文本标记文档 html xml
对象:提供了属性和方法
模型:使用属性和方法操作超文本标记性文档
可以使用js里面的DOM提供的对象,使用这些对象的属性和方法,对标记性文档进行操作
想要对标记性文档进行操作,首先需要对标记性文档里面的所有内容封装成对象
对HTML 标签 属性 文本内容都封装为对象
要想对标记性文档进行操作,解析标记性文档
--使用DOM解析HTML过程
根据HTML的层级结构,在内存中分配一个树形结构,需要把HTML中的每部分封装成对象
document对象,整个文档
write():向页面输出变量(值/html代码)
getElementById("标签里边的id的值");通过id得到标签(元素)
获得属性值,标签对象.属性名称;
设置属性值,标签对象=值;
getElementsByName("标签里边的name的值");返回值是数组
getElementsByTagName("标签名称")返回值是数组
element对象:元素(标签)对象
getAttribute("属性名称"):获得属性里面的值 input1.getAttribute("value");
setAttribute("属性名称","属性值")设置属性里面的值
removeAttribute("name");删除属性得值,但是不能删除value里面的值

属性对象
getAttributeNode("属性名称");

文本对象
--Node节点对象,这个对象使这些对象的父对象
如果在对象里面找不到想要的方法,这个时候到Node对象里面去找
nodeName string 节点的名字,根据节点的类型而定义
nodeValue string 节点的值,根据节点的类型而定义
nodeType number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
//获取文本节点
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点

-childNodes NodeList 所有子节点的列表,但是浏览器兼容性很差
-parentNode Node 返回一个给定节点的父节点
previousSibling Node 指向前一个兄弟节点,如果这个节点就是第一个兄弟节点,那么该值为null
nextSibling Node 指向后一个兄弟节点,如果这个节点就是最后一个兄弟节点那么该值为null

hasChildNodes Boolean 当childNodes包含一个或多个节点时,返回true
attributes NameNodeMap 包含了代表一个元素的特性的Attr对象,仅用于Element节点
appendChild(node) Node 将node添加到childNodes的末尾
removeChild(node) Node 从ChildNodes中删除node
replaceChild(newnode,oldnode) Node 将ChildNodes中的oldnodes替换成newnodes
insertBefore(newnode,refnode) Node 在childNodes中 的refnode之前插入newnode

Node对象属性
nodeName
nodeType
nodeValue

<script type="text/javascript">
//获取标签对象
var span1 = document.getElementById("spanid");
alert(span1.nodeType);//1
alert(span1.nodeName);//SPAN
alert(span1.nodeValue);//null

//属性
var id1 = span1.getAttributeNode("id");
alert(id1.nodeType);//2
alert(id1.nodeName);//id
alert(id1.nodeValue);//spanid

//文本
var text1 = span1.firstChild;
alert(text1.nodeType);//3
alert(text1.nodeName);//#text
alert(text1.nodeValue);//文本内容
</script>
<span id="spanid">哈哈呵呵</span>

JS--dom对象:document object model文档对象模型的更多相关文章

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

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

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

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

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

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

  4. XML DOM(Document Object Model)

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

  5. 前端-javascript-DOM(重点)文档对象模型

    1.DOM概念-文档对象模型 // 什么是DOM ? /* Document Object Model 文档对象模型 面向对象: 三个特性 封装 继承 多态 一个对象: 属性和方法 说 万事万物皆对象 ...

  6. JavaScript学习笔记7 之DOM文档对象模型

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  7. DOM(Document Object Model)

    DOM(Document Object Model):    结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容.    结点类型        1.元素结点 对于元素结点的n ...

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

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

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

    DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...

随机推荐

  1. python3 内置函数

    '''iter()和next()'''# lst = [1, 2, 3]# it = iter(lst)# print(it.__next__())# print(it.__next__())# pr ...

  2. 4939-Agent2-洛谷

    传送门 emm... 这次没有原题了 (因为我懒) 就是一道很简单的树状数组 真的很简单很简单 只用到了一点点的差分 注意注意: 只用树状数组,不用差分会t掉的 所以.. 我不仅t了 还wa了 emm ...

  3. ExFilePicker的使用 — 获取本地图片资源并用RecyclerView展示出来

    代码其实很简单,所以就不多进行文字说明,直接上完整的代码: 第一步:在app/build.gradle添加需要使用到的依赖库:(这里对引用的版本冲突问题作了处理,详情请看链接:https://www. ...

  4. CF429E Points and Segments 构造、欧拉回路

    传送门 如果把一条线段\([l,r]\)看成一条无向边\((l,r+1)\),从\(l\)走到\(r+1\)表示线段\([l,r]\)染成红色,从\(r+1\)走到\(l\)表示线段\([l,r]\) ...

  5. 单链表的python实现

    首先说下线性表,线性表是一种最基本,最简单的数据结构,通俗点讲就是一维的存储数据的结构. 线性表分为顺序表和链接表: 顺序表示指的是用一组地址连续的存储单元依次存储线性表的数据元素,称为线性表的顺序存 ...

  6. 用asp.net core 把用户访问记录优化到极致

    菜菜呀,前几天做的用户空间,用户反映有时候比较慢呀 CEO,CTO,CFO于一身的CXO 是吗? 菜菜 我把你拉进用户反馈群,你解决一下呀 CEO,CTO,CFO于一身的CXO (完了,以后没清净时候 ...

  7. python爬虫随笔-scrapy框架(1)——scrapy框架的安装和结构介绍

    scrapy框架简介 Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试 ...

  8. 面试题-如何测试一个APP

    问: 假如给你一个APP,你应该如何测试,分别从哪些方面来针对该APP进行测试. --- 1.安装.卸载测试 测试软件在不同操作系统(Android.iOS)下安装是否正常.软件安装后的是否能够正常运 ...

  9. 2018 Multi-University Training Contest 1

    比赛链接:2018 Multi-University Training Contest 1 6301 Distinct Values 题意:输出一个长度为n的序列,要求满足m个区间的数都不相同,并且字 ...

  10. NoSQL是什么?

    导读 NoSQL(not only sql,不仅仅是SQL),是一项全新的数据库革命性运动,泛指非关系型数据库,对于NoSQL这个新兴的名词,每个人的理解都不同.其实NoSQL一词最早出现于1998年 ...