一、DOM对象
1. HTML DOM 树
2. 什么是 DOM?
DOM 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:“W3文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
1). 核心 DOM-针对任何结构化文档的标准模型
2). XML DOM-针对 XML 文档的标准模型
3). HTML DOM-针对 HTML 文档的标准模型
3. HTML DOM 是:
1). HTML 的标准对象模型
2). HTML 的标准编程接口
3). W3C 标准 HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换句话说，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准
4. 对DOM节点的理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>康释文</title> </head> <body> <p id ="demo"> <a href="#">北京大学</a> </p> <span> 北京大学 </span> </body> </html>
解析:1). 根节点上面例子中的根节点就是<html>2). 父节点一个节点的上面一个节点就是它的父节点。如本例中<p>的父节点是<body>，同理<span >的父节点也是<body>
3). 子节点跟父节点相反，一个节点的下一个节点就是它的子节点。<body> 的子节点是<p>、<span>,它的父节点是<html>4). 兄弟节点兄弟节点有相同父节点且在同一个层。本例中的兄弟节点是<p>跟<span>
1. getElementById()
在 JavaScript 中，如果想通过 id 来选中元素，可以使用 document 对象的getElementById()方法。
getElementById()方法类似于 CSS 中的 id 选择器。
2. getElementsByName()
在 JavaScript 中，如果想通过 name 来选中元素，可以使用 document 对象的 getElementsByName()方法。
三、获取相关节点
1. 访问父节点
A. parentNode()
功能:获取指定节点的父节点
<div id="text"> <p id="con"> parentNode 获取指点节点的父节点</p> </div> <script type="text/javascript"> var mynode= document.getElementById("con"); document.write(mynode.parentNode.nodeName); </script>效果：
2. 访问兄弟节点1). nextSibling
功能:可返回某个节点之后紧跟的节点(处于同一树层级中)
说明:
1). 如果无此节点，则该属性返回 null
2). 元素中的空格被视作文本，而文本被视作文本节点 举行:
实现获取兄弟节点的 ID 代码如下:
<body style="background-color:orange"> <p>列表示例:</p> <ul id="myList"> <li id="item1">fenzhen</li><li id="item2">waite</li> </ul> <p id="demo">点击按钮来获得首个项目的下一个同胞的 id。</p> <button onclick="myFunction()">获取</button> <script> function myFunction() { var x=document.getElementById("demo"); x.innerHTML=document.getElementById("item1").nextSibling.id; } </script> </body>显示前
显示后：
注意:
返回某个节如果上面两个<li>标签有空格则会出现“undefined”
2). previousSibling
功能:可返回某个节点之前紧跟的节点(处于同一树层级中)
3. childNodes
功能:访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有 length 属性
<body style="background-color:orange"> <p id="demo">请点击按钮来获得 元素子节点的相关信息。</p> <button onclick="myFunction()">获取</button> <script> function myFunction() { txt=""; c=document.body.childNodes; for(i=0; i<c.length; i++) { txt=txt + c[i].nodeName + "<br>"; x=document.getElementById("demo"); x.innerHTML=txt; } } </script> </body>
二、操作DOM属性、HTML和文本
1. js 获取的 html 内容包括
1). 文本内容
2). 属性值
可以采用 js 的 dom 方法，比如 document.getElementById()但是此种方法不简洁，使用起来不方便，违反了短小精悍的原则，推荐采用 jqury的方法，jquery 即 js 库，封装了 js 的一些方法，直接用就好了。
注意:
1). 使用 jquery 需要包含 jquery.js 文档 <script type="text/JavaScript"src="jquery.js"></script>
至于 jquery.js，网上老多了，请自行下载。
2). <scrpt></script>里面必须包含 $(document).ready() 方法。
这里介绍 jquery 的 3 个方法
1). text() text 即设置或者返回文本内容
2). html() 设置或者返回 html 内容
3). val() 设置或者返回表单字段的值
<head> <meta charset="UTF-8"> <title>康释文</title> <script src="../js/jquery-1.9.1.min.js"></script> <script> $(document).ready(function () { $("#btn1").click(function () { $("#test1").text("<b> hello world!</b>") }); $("#btn2").click(function () { $("#test2").html("<b> hello world!</b>") }); $("#btn3").click(function () { $("#test3").val("Dolly Duck") }); }); </script> </head> <body style="background-color:orange"> <p id="test1">这是段落。</p> <p id="test2">这是另一个段落。</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"> </p> <button id="btn1">设置文本</button> <button id="btn2">设置 HTML</button> <button id="btn3">设置值</button> </body>
2. 通过attribute获取和设置属性值
<a href="www.f-z.cn" target="_blank">前端大学</a>， <p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p> <button onclick="myFunction()">试一下</button> <script> function myFunction() { var a=document.getElementsByTagName("a")[0]; document.getElementById("demo").innerHTML=a.getAttribute("target"); } </script>
点击后