WebAPI编程_DOM

本文介绍: DOM在实际开发中主要用来操作元素获取页面中的元素可以使用以下几种使用 getElem entById()方法可以获取带有特定ID的元素对象语法:var element=document.getElem entById(id);参数 element是一个Elem ent对象,如果当前文档中拥有特定ID的元素不存在,则返回 null id是大小写敏感的字符串,代表了所要查找的元素唯一ID返回值返回一个匹配到ID的DOM Elem ent对象,若在当前Do cu m ent下没有找到,则返回 null 返回带有指定标

DOM介绍

什么是DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

一个 web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 Ja vaSc ript等脚本语言进行修改。

DOM树

文档:一个页面就是一个文档,DOM中使用 document 表示
元素:页面中所有标签都是元素,DOM中使用 element 表示
 节点:网页中所有内容都是节点(标签,属性,文本,注释等),DOM中用node 表示
DOM把以上内容都看作是对象
在这里插入图片描述
DOM树最顶端是document，BOM最顶端是window

文档（document）一个页面当成文档
元素（el em ent）页面中所有标签元素
节点（node）网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），每个节点都是对象，都有属性和方法

DOM获取元素

获取方式	用法	返回值
根据Id获取	document.getElem entById(‘id’)	返回指定 id的元素对象，未找到返回null，存在多个 id返回undefined
根据标签名获取	document.getElementsByTa gNa me(‘标签名’)	返回的是指定标签的动态集合，是一个类数组对象，伪数组，但不是数组。可以通过下标索引访问
根据Na me获取	document.getElementByNa me(‘name 属性值’)	返回指定name的元素对象集合
根据Clas sNa me获取（html5新增）	document.getElementByCla ssNa me(‘class 属性值’)	返回指定class name的元素对象集合
根据选择器获取（新增）	document.querySel ector(‘选择器’)	获取的是给定选择器元素，只能返回给定选择器第一个元素
根据选择器获取（新增）	document.querySel ectorAll(‘选择器’)	获取的是给定选择器元素，返回元素的集合

docu ment.getElementById() 根据Id获取

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

如果没有指定 ID 的元素返回 null
如果存在多个指定 ID 的元素则返回第一个。

示例如下

	<body&gt;
	    <h3 id="hello">静夜思</h3>
	    <p id="hello"><span>床前明月光</span><span>疑是地上霜</span></p>
	    <p><span>举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //如果存在多个指定 ID 的元素则返回第一个。
	        var helloId=document.getElementById("hello");
	        console.log(helloId)
	        //没有指定ID元素
	        hiId=document.getElementById("hi");
	        console.log(hiId)
	    </script>
	</body>

在这里插入图片描述

document.getElementsByTagName() 根据标签名

getElementsByTagName() 方法可返回带有指定标签名的对象的集合,作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
示例如下

	<body>
	    <h3>静夜思</h3>
	    <p><span>床前明月光</span><span>疑是地上霜</span></p>
	    <p><span>举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //返回一个伪数组
	        var pTag = document.getElementsByTagName("p");
	        console.log(pTag);
	        //字符串不区分大小写
	        var spanTag = document.getElementsByTagName("SPAN");
	        console.log(spanTag)
	        //*返回所有元素
	        var tagAll = document.getElementsByTagName("*")
	        console.log(tagAll)
	        //因为返回的是NodeList 对象,我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
	        console.log(spanTag[3])
	    </script>
	</body>

在这里插入图片描述

document.getElementByName() 根据Name获取

getElementsByName() 方法可返回带有指定名称的对象的集合。作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

示例如下

	<body>
	    <h3 name="hello">静夜思</h3>
	    <p><span name="hi">床前明月光</span><span name="hi">疑是地上霜</span></p>
	    <p><span name="hi">举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //根据name属性,返回一个伪数组
	        var helloName = document.getElementsByName("hello");
	        console.log(helloName);
	        //多个同名name
	        var hiName = document.getElementsByName("hi");
	        console.log(hiName)
	    </script>
	</body>

在这里插入图片描述

document.getElementsByClassName() 根据ClassName获取（html5新增）

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
多个类名使用空格分隔，如 “test demo”。

示例如下

	<body>
	    <h3 class="hello">静夜思</h3>
	    <p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p>
	    <p><span class="hi">举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //根据class  Name  返回指定元素
	        var ClassName = document.getElementsByClassName("hello");
	        console.log(ClassName);
	        //根据多个类名返回指定元素
	        var classNames = document.getElementsByClassName("hi hello");
	        console.log(classNames)
	    </script>
	</body>

在这里插入图片描述

document.querySelector() 根据选择器获取单个元素（新增）

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

示例

	<body>
	    <h3 class="hello">静夜思</h3>
	    <p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p>
	    <p><span class="hi">举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //根据选择器返回指定元素
	        var ClassName = document.querySelector(".hello");
	        console.log(ClassName);
	        //选择器选中多个元素,只返回第一个
	        var classNames = document.querySelector(".hi");
	        console.log(classNames)
	    </script>
	</body>

在这里插入图片描述

document.que rySelectorAll() 根据选择器获取所有元素（新增）

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。
示例如下

	<body>
	    <h3 class="hello">静夜思</h3>
	    <p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p>
	    <p><span class="hi">举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //根据选择器返回指定元素
	        var ClassName = document.querySelectorAll(".hello");
	        console.log(ClassName);
	        //选择器选中多个元素,只返回第一个
	        var classNames = document.querySelectorAll(".hi");
	        console.log(classNames)
	    </script>
	</body>

在这里插入图片描述

document对象属性

方法	作用
document.body	返回文档的body元素
document.title	返回文档的title元素，表示页面的标题
document.documentElement	返回文档的html元素，即HTML页面的全部信息（通过此可以将文档全部元素放进一个字符串，供别人读取分析
document.fro ms	返回对文档中所有From对象引用，复数形式，可以返回多个表单
document.images	返回对文档中所有的image对象，与上述一样

document.body 设置或返回文档的body元素

body 属性用于设置或返回文档体。

如果是返回, 该属性返回当前文档的元素。
如果是设置, 该属性会覆盖所有在元素中的子元素, 并用新的内容来替换它。
示例如下

	<body>
	    <h3 class="hello">静夜思</h3>
	    <p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p>
	    <p><span class="hi">举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //返回文档的body元素
	        var documentBody = document.body;
	        console.log(documentBody);
	    </script>
	</body>

在这里插入图片描述

document.title 返回或设置文档的title元素

title 属性可返回或设置当前文档的标题（ HTML title 元素中的文本）。
示例如下

	<body>
	    <h3 class="hello">静夜思</h3>
	    <p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p>
	    <p><span class="hi">举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //返回文档的title元素
	        var documentTitle = document.title;
	        console.log(documentTitle);
	        //设置title元素
	        document.title = "你好";
	    </script>
	</body>

在这里插入图片描述

document.documentElement 返回文档的html元素

documentElement 属性以一个元素对象返回一个文档的文档元素。

HTML 文档返回对象为HTML元素。

示例如下

	<body>
	    <h3 class="hello">静夜思</h3>
	    <p><span class="hi">床前明月光</span><span class="hi hello">疑是地上霜</span></p>
	    <p><span class="hi">举头望明月</span><span>低头思故乡</span></p>
	    <script>
	        //返回文档的html元素
	        var documentHTML = document.documentElement;
	        console.log(documentHTML);
	    </script>
	</body>

在这里插入图片描述

document.fro ms 返回对文档中所有From对象引用

代码	作用
document.forms	表示获取当前页面的所有表单
document.forms[0]	表示获取当前页面的第一个表单
document.forms[‘exportServlet’]	表示获取当前页面的name=”exportServlet“的表单
document.forms[‘exportServlet’].username.value	获取表单为exportServlet，name为exportServlet的值
document.forms[0].submit	表示提交第一个form表单

document.forms[0].submit提交的地址即对应的action地址如果想要改变，可以使用document.forms[0].action = theUrl;

比如我们写一个提交可以这样

	<script>
		function dosubmit(theUrl) {
		document.forms[0].action = theUrl;
		document.forms[0].submit
		}
		
		<form action="subLogin" method="post">
		<a href="#" onclick="dosubmit('test.json')" /> 提交
		</form>
	</script>