JS(三)之DOM编程

程序员文章站 2022-05-06 09:30:07

...

一、DOM

解释：Document Object Model 文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

概念：将(html)标记语言文档的各个组成部分封装为对象

特点：DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档的结构。

组成：
（1）Document：整个文档对象
（2）Element：元素对象
（3）Attribute：属性对象
（4）Text：文本对象
（5）Comment：注释对象

（6）Node：节点对象(理解节点的含义)

图形说明：

JS(三)之DOM编程

DOM编程的理解：一切皆节点，在进行HTMLDOM编程的时候，会将HTML文档映射为DOM树结构，该DOM树在内存中有着明显的层级关系。DOM树的每个 Document、Element、Text 、Attr和Comment都是 DOM Node。由图形可知， DOM 实质上是一些节点的集合。由于文档中可能包含有不同类型的信息，所以定义了几种不同类型的节点，如：Document、Element、Text、Attr 、Comment 等，通过操作DOM树，可以动态的改变HTML页面的显示效果。

二、DOM中的对象

2.1 Document：文档对象

特点：每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行获取、修改、添加或删除 HTML 元素的操作

提示：Document 对象是 Window 对象的一部分，可通多window获取--window.document的方式获取。

常用属性：

body(可以获取body标签对象)、title(可以获取或设置title标签直接的内容)

例1

                        var doc=document.body;
			document.write(typeof doc+"<br />");//object
			var titl=document.title;//获取标题
			document.write(titl+"<br />");
			document.title="我到底是不是个标题";//设置
			var doc=document.lastModified;//获取文档的最后一次修改时间(元数据)
			document.write(doc.toLocaleString()+"<br />");
			var url=document.URL;//获取当前的URL(地址栏中的内容)--文本加密(能否设置呢？)--只读
			document.write(url+"<br />");

补充：document中的write方法可以向页面写入内容（HTML标签、文本、CSS、JS等）

注意：在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容

相关链接：点击打开链接，点击打开链接，点击打开链接

常用方法：

（1）获取Element(标签)对象(理解记忆：三大常用的选择器)

* getElementById("id值"):通过id属性值获取唯一的元素
* getElementsByTagName():通过标签名称获取元素对象数组
* getElementsByName("name值"):通过name属性值获取元素对象数组(主要是针对表单的)

* getElementsByClassName("class值"):通过class属性值获取元素对象数组

        //(1)你获取到标签对象后，想要设置标签的属性值,直接打点调用属性
        document.getElementsByTagName("body")[0].bgColor="red";
        //(2)一定要注意位置，尤其是获取标签对象，一定要在标签加载之后获取,否则是null

获取到标签对象，我们可以做什么呢？首先，给元素动态的增加新的样式

        <body>
		<div id="ps">
			我是谁，为了谁，我的兄弟姐妹，不流泪！
		</div>

	</body>
	<script type="text/javascript">
		var a = document.getElementById("ps"); //注意：获取标签对象，一定要在标签加载之后获取,否则是null
		//给标签设置属性(逐个设置)
		a.style.color = "red";
		a.style.background="yellow";
		a.style.fontSize="10px";//注意与直接书写CSS样式的区别，中间的'-'去掉，同时第二个单词首字母大写
	</script>

是不是太麻烦了，有一种更简单的方式(只是把script的内容换一下，效果同上)

//通过复合属性的样式，设置---注意书写形式
document.getElementById("ps").style.cssText="color: red;background: yellow;font-size: 10px;";//样式的书写很像CSS中代码书写

设置样式的语法：

style 属性：设置标签的CSS样式 --语法:标签对象.style.CSS属性名="属性值";

style.cssText 属性：设置标签的CSS样式 --语法：标签对象.style.cssText="css属性名1:值1;属性2:值2...";

需求：给标签的文本中追加新的内容(不是覆盖)

        <body>
		<div id="ps">
			我是谁，为了谁，我的兄弟姐妹，不流泪！
			<div id="pp">
			我爱你，我的家，我的天堂！<!--hello的位置-->
			</div>
			哈哈！
		</div>
	</body>
	<script type="text/javascript">
		var a = document.getElementById("pp"); //获取标签对象
		//(获取)设置标签之间的文本，标签对象有一个属性 innerText(输出的时候，会发现包含子标签的内容)
                // innerHTML和innerText的区别？
		a.innerText+="hello";//多级标签的时候，对应该标签的尾部添加(即：</标签>上面)
	</script>

注意："+="是追加，其次innerHTML和innerText(IE)的区别(点击打开链接)，多使用innerHTML

* innerHTML属性：获取或设置元素的子内容(可能包含子标签)
* innerText属性：获取或者设置标签之间的文本内容

获取标签的属性

        <body>
		<div id="div1">
			想我这样优秀的人，本该灿烂过一生。
		</div>
		<div class="bb">
			想我这样优秀的人，你还见过多少人。
		</div>
	</body>
	<script type="text/javascript">
		//(1)获取到标签对象
		var div1=document.getElementById("div1");
		//(2)通过标签对象，获取该标签的id属性的属性值(非属性对象)
		var attr=div1.getAttribute("id");
		document.write(attr+"<br />");//div1
		document.write(typeof attr); //string
		//(3)给一个标签设置属性(参1:属性名,参数2:属性值)
		div1.setAttribute("style","color:red");
//		div1.setAttributesetAttribute("class","a");
		//(4)获取标签的属性对象Attribute
		var attrb=document.getElementsByTagName("div")[1].getAttributeNode("class");
		document.write(attrb.name);//获取标签对象的名字:class
		attrb.value="a";//通过标签对象给标签设"标签值"
	</script>

注意：带Node字样的都是节点对象

（2）创建其他对象

* createElement：创建元素对象
* createAttribute：创建属性对象
* createTextNode：创建文本对象

* createComment：创建注释对象

        <body>
	</body>
	<script type="text/javascript">
		//需求：通过文档对象，动态创建HTML标签---都是通过对象添加对象，把组件加入里面	
		
		//(1)创建标签对象---没有指定的话则是在body内创建
		var mydiv = document.createElement("div");
		//(2)创建文本对象
		var mytext = document.createTextNode("像我这样忧郁的人，你还见过多少人");
		//(3)创建注释对象
		var mycomment = document.createComment("这是一行注释");
		//(4)创建属性对象
		var attr = document.createAttribute("style");
		//(5)通过属性对象,给属性赋值
		attr.value="color:red;font-size:50px";
		//(6)把这属性对象设置给这个标签---此标签这时候才具有这个属性(相当于添加标签)
		mydiv.setAttributeNode(attr);
		//(7)给此标签对象追加子内容
		mydiv.appendChild(mytext);
		//(8)获取HTML结构中body标签对象
		var bd = document.body;
		//(9)向body标签中添加子标签
		bd.appendChild(mydiv);//插入新的标签(节点)
		//(10)向body标签中添加注释(与body的子标签同级)
		bd.appendChild(mycomment);//插入新的注释节点
		
		//说明：可以把后面的内容注释，通过查看生成的动态HTML的内容来理解，通过逐个解释来看效果
		
		//(11)移除这个标签对象
		//bd.remove();
		//(12)移除子内容(子标签)--对象的形式
		//bd.removeChild(mydiv);
		//(13)移除属性对象
		//mydiv.removeAttributeNode(attr);
		//(14)通过属性名去移除一个属性(更简便)
		//mydiv.removeAttribute("style");
	</script>

改变的主要应用：

1、改变 HTML 内容(两种方式)
2、改变 CSS 样式(两种方式)
3、改变 HTML 属性(父--setAttribute()和子--value)
4、创建新的 HTML 元素

5、删除已有的 HTML 元素

未完待续。。。

JS(三)之DOM编程

js 数据存储和DOM编程

js 三大家族之offset

js-DOM事件之按钮绑定函数注意事项代码实例

JavaScript编程开发之js异步编程教程

JS核心之DOM操作上

Javascript入门学习第六篇 js DOM编程_基础知识

EF三种编程方式详细图文教程（C#+EF）之Database First

《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史_javascript技巧

初学three.js(三)照相机之正交投影照相机

js加载之使用DOM方法动态加载Javascript文件_javascript技巧

JS(三)之DOM编程

js 数据存储和DOM编程

js 三大家族之offset

js-DOM事件之按钮绑定函数注意事项代码实例

JavaScript编程开发之js异步编程教程

JS核心之DOM操作 上

Javascript入门学习第六篇 js DOM编程_基础知识

EF三种编程方式详细图文教程（C#+EF）之Database First

《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史_javascript技巧

初学three.js(三)照相机之正交投影照相机

js加载之使用DOM方法动态加载Javascript文件_javascript技巧

JS核心之DOM操作上