八、DOM（一） -- DOM对象
2024-05-08 20:46:48
一、 DOM基础
1.1 什么是DOM
DOM(Document Objecevt Model) :文档对象模型1) DOM 是W3C（万维网联盟）的标准。它是一个规范，而不是某个特定编程语言的实现。所以不仅是js有DOM，任何一种语言都可以实现DOM的规范。2) DOM 定义了访问和操作HTML文档的标准接口。其作用是用对象描述文档。通过DOM可以改变网页的内容、结构和样式。3) DOM 将文档描述成一个由节点层级构成的树结构。1.2 DOM树
1) DOM中，所有事物都是节点。DOM将HTML文档的各个部分都描述为一个对象，我们称之为节点(Node)。节点是构成文档树的最基本的组成部分。2) DOM将HTML文档描述为一个文档树。整个文档树使用了document对象来描述。
1.3 具体操作可以使用API文档。
1）方式一: 使用文档DHTML.chm文档
切记：此文档很重要
2）方式二 : 使用在线文档
https://www.w3school.com.cn/jsref/dom_obj_all.asp
二、DOM节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。2.1 节点对象
1）节点对象分类
+++ Node节点对象分类: 文档节点: 1、文档本身是文档节点 (Document类型对象)2、document对象是Document构造函数的实例。浏览器提供了document对象,浏览器页面中可以直接使用 元素节点: HTML标签(Element类型的对象)属性节点: HTML标签的属性(Attr类型的对象)文本节点: HTML标签内的文本。（空白文本也是文本节点）(Text类型的对象)注释节点:注释是注释节点 +++ Node节点对象之间的关系: 1、Node对象就是节点对象，它是DOM中最基础的对象。在DOM中所有事物都被看作为节点对象。2、Node对象分为Document、Text、Attr、Element等类型的对象。这些构造函数都直接或间接继承了Node构造函数。（通过原型链实现） 3、document对象是浏览器为我们提供了Document构造函数的实例，该对象我们可以直接使用。>>>>>> Node节点对象的分类
Node节点对象分为Document、Attr、Element、Text等类型的对象。
这些构造函数都直接或间接继承了Node构造函数。
//文档节点。docuemnt对象是浏览器提供的Document的实例，可直接使用console.log(document);console.log(document instanceof Document); //trueconsole.log(document instanceof Node); //true//元素节点。var s=document.getElementById("cc");console.log(s instanceof Element); //trueconsole.log(s instanceof Node); //true//属性节点var attr=s.getAttribute("id")console.log(attr instanceof Attr); //trueconsole.log(attr instanceof Node); //true>>>>>> Document、Attr、Element、Text都直接或间接继承了Node构造函数（通过原型链实现继承关系）
console.log(Document.prototype.__proto__);console.log(Element.prototype.__proto__);console.log(Text.prototype.__proto__.__proto__);console.log(Attr.prototype.__proto__);
2）Node基本属性
每个节点对象都拥有这些属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）
3）节点注意事项
1、文本或者是空白文本也是节点。2、子节点和子元素节点是完全不同。子节点指的是所有类型的节点，包含空白文本，即文本节点。子元素节点指的就是元素节点。>>>>>> 空白文本也是节点。即文本节点
获取div的子节点，由于空白文本也是文本节点，所以，第一个子节点就是空白文本。
<body><div class="outer"><div class="inner"></div></div>
</body><script>//根据css选择器获取元素对象。如果有多个，也只返回一个var elem=document.querySelector(".outer");//获取元素的第一个子节点var node=elem.firstChildconsole.log(node) // #text</script>获取div的子节点，由于空白文本也是文本节点，但是div内部第一个元素没有空白，所以，第一个子节点就是inner的div。
<body><div class="outer"><div class="inner"></div></div>
</body><script>//根据css选择器获取元素对象。如果有多个，也只返回一个var elem=document.querySelector(".outer");//获取元素的第一个子节点var node=elem.firstChildconsole.log(node) //</script>
>>>>>> 子节点和子元素节点是不同的概念
<body><div class="outer"><div class="inner"></div></div>
</body><script>//根据css选择器获取元素对象。如果有多个，也只返回一个var elem=document.querySelector(".outer");//获取元素的第一个子节点var node=elem.firstChildconsole.log(node) ////获取元素的第一个子元素节点var node=elem.firstElementChildconsole.log(node) //</script>
2.2 Document节点对象
1、document对象是浏览器为我们提供的Document构造函数的实例对象。它代表文档节点对象。我们可以直接使用。2、这个对象是window的属性,可以在页面中直接使用，文档节点对象代表整个HTML。1） document对象常用属性
document.body 获取body标签对象document.documentElement 获取html标签对象document.cookie 设置或返回与当前文档有关的所有 cookie。document.title 返回当前文档的标题。document.URL 返回当前文档的 URL。案例
//获取body标签对象var b1=document.body;console.log(b1)//获取cookievar b2=document.cookie console.log(b2)//获取标题var b3=document.title console.log(b3)//获取URLvar b4=document.URL console.log(b4)
2） document对象常用方法
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。document.getElementsByName() 返回带有指定名称的对象集合。document.getElementsByTagName() 返回带有指定标签名的对象集合。2.3 Element节点对象
1、Element节点对象，即元素节点对象。 浏览器将HTML的元素封装为元素节点对象,即Element对象。 2、Element对象可以拥有类型为元素节点、文本节点、注释节点的子节点。1） Element对象常用属性
+++ 设置或获取元素属性的值 elem.id 设置或返回元素的 id。elem.className 设置或返回元素的 class 属性。elem.style 设置或返回元素的 style 属性。elem.innerHTML 设置或返回元素的内容。elem.title 设置或返回元素的 title 属性。elem.accessKey 设置或返回元素的快捷键。elem.tabIndex 设置或返回元素的 tab 键控制次序。elem.textContent 设置或返回节点及其后代的文本内容。+++ 获取元素的属性elem.clientHeight 返回元素的可见高度。elem.clientWidth 返回元素的可见宽度。elem.tagName 返回元素的标签名。element.nodeName 返回元素的名称。element.nodeType 返回元素的节点类型。element.nodeValue 设置或返回元素值。+++ 获取其他元素elem.firstChild 获取元素的第一个子节点elem.lastChild 获取元素的最后一个子节点elem.childNodes 获取元素的所有子元素elem.attributes 返回元素属性的 NamedNodeMap。element.previousSibling 返回位于相同节点树层级的前一个元素。element.nextSibling 返回位于相同节点树层级的下一个节点。element.parentNode 返回元素的父节点。>>>>>> 设置或获取元素的属性
var ss=document.getElementById("cc")//设置或获取ID属性ss.id="newId"console.log(ss.id);//设置或获取class属性ss.className="newName"console.log(ss.className);//设置或获取style属性ss.style="width:100px;height:100px;background-color:red;";console.log(ss.style);//设置或获取标签内ss.innerHTML="xxx";console.log(ss.innerHTML);
>>>>>> 获取元素的属性
var ss=document.getElementById("cc")ss.style="width:100px;height:100px;";console.log(ss.clientHeight)console.log(ss.clientWidth)console.log(ss.tagName)
>>>>>> 获取元素的其他子元素
var elem=document.getElementById("cc")//返回元素的第一个子节点var b1=elem.firstChild;console.log(b1)//返回元素的最后一个子节点var b1=elem.lastChild;console.log(b1)//返回元素属性的 NamedNodeMap。var b1=elem.attributes;console.log(b1);//返回元素子节点的 NodeList。var b1=elem.childNodes;console.log(b1)2） Element对象常用方法
+++ 获取elem.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。elem.toString() 把元素转换为字符串。+++ 操作元素的属性 elem.setAttribute("cc","12") 把指定属性设置或更改为指定值。elem.removeAttribute("cc") 从元素中移除指定属性。elem.getAttribute("cc") 返回元素节点的指定属性值。elem.setAttributeNode(attrNode) 设置或更改指定属性节点。elem.removeAttributeNode(attrNode) 移除指定的属性节点，并返回被移除的节点。elem.getAttributeNode() 返回指定的属性节点。+++ 操作子元素 elem.appendChild() 向元素添加新的子节点，作为最后一个子节点。elem.insertBefore() 在指定的已有的子节点之前插入新节点。elem.removeChild() 从元素中移除子节点。elem.replaceChild() 替换元素中的子节点。+++ 判断elem.hasClass("xxx") 判断一个元素中是否含有某个classelem.hasAttribute() 如果元素拥有指定属性，则返回true，否则返回 false。elem.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。elem.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。>>>>>> 操作元素属性
var elem=document.getElementById("cc")//给元素设置属性elem.setAttribute("cc","ttttt");console.log(elem); //<div id="cc" class="ccc" cc="ttttt"></div>//获取元素属性var str=elem.getAttribute("cc");console.log(str); //tttttt//删除元素属性elem.removeAttribute("cc");console.log(elem) //<div id="cc" class="ccc" ></div>>>>>>> 创建Attr属性节点对象，操作元素属性
var elem=document.getElementById("cc")//创建attr对象var attr=document.createAttribute("xx")attr.value="123";elem.setAttributeNode(attr)console.log(elem)var attr2=elem.getAttributeNode("xx");console.log(attr2)
>>>>>> 操作子元素
var elem=document.getElementById("cc")//在元素中插入div子元素var newElem=document.createElement("div");newElem.innerText="123"elem.appendChild(newElem);console.log(elem)
2.4 Attr节点对象、Text节点对象
Attr节点对象: Attr节点对象，即属性节点对象。 浏览器将HTML的元素的属性封装为属性节点对象,即Attr对象。 var attr=document.createAttribute("xxx"); 创建属性节点对象 attr.name 获取属性节点名称 attr.value 获取或设置属性节点值 Text节点对象:Text节点对象,即文本节点对象。>>>>>> Attr节点对象
//创建attr属性对象var attr=document.createAttribute("xxx");//设置attr属性对象的值attr.value="21212";console.log(attr.name); //xxxconsole.log(attr.value); //21212>>>>>> Text节点对象
var elem=document.getElementById("cc")//创建text文本节点var textNode=document.createTextNode("xxxxxxxxxxxx");console.log(textNode);//在元素中插入文本节点elem.append(textNode);2.。33 事件
元素节点的属性：elem.innerHTML可以获得元素内部的HTML代码。elem.innerText可以获得元素内部的文本内容。它和innerHTML类似，不同的是它会把html代码去除。elem.idelem.nameelem.valueelem.className 读取元素的class属性。八、DOM（一） -- DOM对象相关推荐
- DOM中Event 对象如何使用
DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...
- html input image 尺寸,HTML DOM Input Image 对象
# HTML DOM Input Image 对象 ## Input Image 对象 Input Image 对象是 HTML5 中的新对象. Input Image 对象表示 HTML 元素. # ...
- vue computed 中操作DOM和给对象添加属性遇到的问题
这两天使用vue做东西遇到一些问题,今天总结记录一下: 在computed中没法操作dom元素,比如 computed: {w() {return this.$refs.box.offsetWidth ...
- 前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式 使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
- ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？
译者:前端小智 来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...
- 虚拟dom_虚拟DOM与dom diff
什么是虚拟DOM 虚拟DOM是一颗以JavaScript对象(node节点)作为基础的树,用对象属性来描述节点,他是对真实DOM的抽象,通过一些列操作使这棵树映射到真实环境上 虚拟dom就是能代表DO ...
- 什么是DOM，DOM的作用，以及DOM与JavaScript的关系
一个想学web前端的初学者,如果在知乎中搜索推荐书目的话,得到的答案多数都是:首先,学习htlm+css:第二点就是阅读<JavaScript DOM 编程艺术>这本书. 作为一个初学的小 ...
- Vue进阶之Virtual DOM(虚拟DOM) 实现原理
Vue进阶之Virtual DOM(虚拟DOM) 实现原理 Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual D ...
- Vue 源码学习—Virtual DOM(虚拟 DOM)
Virtual DOM Virtual DOM是什么 真实DOM成员 引入原因 作用 Virtual DOM是什么 定义: 普通的js对象来描述DOM对象,不是真实的DOM,顾名思义,称为虚拟DOM ...
- 前端学习之JavaScript DOM以及DOM操作的基础知识
在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了--这就是javascript DOM Javascript DOM DOM(Document Object ...
最新文章
- 新年到了，该规划一下来年了
- CentOS6.5 iscsi配置
- 「起点订阅页」Checkbox 美化引发的蝴蝶效应
- JavaEE Tutorials (24) - 资源适配器示例
- AtCoder Beginner Contest 131 F - Must Be Rectangular!
- mysql重复make_Mysql5.6 make 错误以及解决办法
- 两种语言实现设计模式（C++和Java）（二：单例模式）
- Spark StreamingContext创建方式
- 浮动路由与VRRP的概念
- telnet linux 退格键无法生效
- 中职 计算机 教案,中职计算机基础教案.doc
- 两张图片放在一起有条白线_用photoshop对两幅图无缝拼接后，怎么消除接口那条明显的线？...
- Java简单循环依赖的解决 —— spring_imitate（Spring的模仿）
- win7蓝牙怎么连接_小米智能手环怎么连接手机蓝牙
- Nazo前三十三关攻略
- 数据挖掘中最容易犯的几个错误，你知道吗？
- 【面试题目】你有12个硬币，其中有一个的重量与其他的不一样，有三次使用测量平衡的机会来找出重量不同的那个。该怎么做呢？
- 常见的网络准入控制技术对比表
- 今天，你开发了吗？有成为这1/1000000了吗
- Android-传感器-加速度传感器（Accelerometer sensor）