WEB基础之：JavaScript HTML DOM
JavaScript HTML DOM
1. Document
Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM (Document Object Model)树。DOM 树包含了像<body> 、<table>这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。
通过DOM(可编程的对象模型)，JavaScript 获得了足够的能力来创建动态的 HTML。
- 能够改变页面中的所有 HTML 元素
- 能够改变页面中的所有 HTML 属性
- 能够改变页面中的所有 CSS 样式
- 能够对页面中的所有事件做出反应
2. Document 对象
| 属性 | 描述 |
|---|---|
| document.activeElement | 返回当前获取焦点元素 |
| document.anchors | 返回对文档中所有 Anchor 对象的引用 |
| document.baseURI | 返回文档的绝对基础 URI |
| document.body | 返回文档的body元素 |
| document.cookie | 设置或返回与当前文档有关的所有 cookie |
| document.doctype | 返回与文档相关的文档类型声明 (DTD) |
| document.documentElement | 返回文档的根节点 |
| document.documentURI | 设置或返回文档的位置 |
| document.domain | 返回当前文档的域名 |
| document.embeds | 返回文档中所有嵌入的内容（embed）集合 |
| document.forms | 返回对文档中所有 Form 对象引用。 |
| document.images | 返回对文档中所有 Image 对象引用。 |
| document.links | 返回对文档中所有 Area 和 Link 对象引用。 |
| document.scripts | 返回页面中所有脚本的集合 |
| document.inputEncoding | 返回用于文档的编码方式（在解析时） |
| document.lastModified | 返回文档被最后修改的日期和时间 |
| document.readyState | 返回文档状态,如: complete |
| document.referrer | 返回载入当前文档的文档的 URL |
| document.title | 返回当前文档的标题 |
| document.URL | 返回文档完整的 |
3. Document方法
3.1 查找HTML 元素
-
通过元素名查找HTML元素
var element = document.querySelector(selectors); //返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。 如果找不到匹配项，则返回null。 var elementList = parentNode.querySelectorAll(selectors); //返回与指定选择器匹配的所有元素的列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。 //一个class属性为"user-panel main"的div元素<div>(<div class="user-panel main">)内包含一个name属性为"login"的input元素<input> (<input name="login"/>) ，选择该带有'login'的元素 var el = document.querySelector("div.user-panel.main input[name='login']"); -
通过 id 查找 HTML 元素
//id是大小写敏感的字符串，代表了所要查找的元素的唯一ID. var element = document.getElementById(id); -
通过标签名查找 HTML 元素
var elements = document.getElementsByTagName(name); //name 是一个代表元素的名称的字符串。特殊字符 "*" 代表所有元素。 //开始于一个具体的父级元素并且从它自上而下递归地在DOM树中搜索符合标签名称参数的子元素。 elements = document.getElementsByTagNameNS(namespace, name) //namespace 是所要查询的元素的命名空间URL //name 是所要查询的元素的名称。其中特殊字符 "*" 代表所有元素 //从一个特定的父元素开始，并从该父元素的DOM中自上而下递归式搜索，查找所有与标签名参数匹配的子元素 //注意当调用getElementsByTagName方法获取到的节点不是文档节点时，实际上是调用了element.getElementsByTagNameNS方法 。 -
通过类名查找 HTML 元素
var elements = document.getElementsByClassName(names); // or: var elements = rootElement.getElementsByClassName(names); //names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔 //getElementsByClassName 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素.
3.1.1 转义特殊字符
如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，且必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log('#foo\bar') // "#fooar"
document.querySelector('#foo\bar') // 不匹配任何元素
console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\\\bar') // 匹配第一个div
document.querySelector('#foo:bar') // 不匹配任何元素
document.querySelector('#foo\\:bar') // 匹配第二个div
</script>
3.2 改变 HTML 输出流
-
新窗口打开打开一个输出流,添加一些文本，然后关闭输出流
-
let w=window.open(); // document.open() 打开一个输出流来收集 document.write() 或 document.writeln() 方法输出的内容。调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 document.close() 方法关闭文档，并迫使其内容显示出来。 // 注意：如果目标文件已经存在，它将被清除。如果这个方法没有参数，会显示一个新窗口(about:blank)。 w.document.open(); w.document.write("<b>Hello World!</b>"); // document.close();用于关闭一个由 document.open 方法打开的输出流，并显示选定的数据。 w.document.close();
-
-
使用 document.write() 方法将内容写到 HTML 文档内容流中。如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
-
HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。 使用函数来执行document.write代码如下： <script> function myfunction(){ document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖"); } document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落。</p>"); </script> <p > 您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。 </p> <button type="button" onclick="myfunction()">点击这里</button>
-
3.3 改变 HTML 内容
-
使用 innerHTML 写入到 HTML 元素。innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
-
<script>document.getElementById("dowr").innerHTML = "将内容写到 HTML 文档中。";</script>
-
3.4 改变 HTML 属性
-
document.getElementById(id).attribute=新属性值 //例 document.getElementById("image").src="4.png"; document.createAttribute(attributename)
3.5 改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
document.getElementById(id).style.property=新样式
3.6 使用事件
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
3.6.1 添加事件并对事件做出反应
通过触发事件来执行代码。如：元素被点击
// onclick
<p id="id1" onclick="document.getElementById('id1').style.color='red'">test</p>
// document.addEventListener(event, function, useCapture) 方法用于向文档添加事件句柄。
function fun1(){
document.getElementById('id1').innerHTML = 'Hello World!';
}
document.addEventListener('click',fun1)
// document.removeEventListener(event, function, useCapture)
document.removeEventListener('click', fun1);
3.6.2 打开一个输出流,添加一些文本，然后关闭输出流
<button onclick="displayDate()">点我</button>
3.6.3 使用 HTML DOM 来分配事件
document.getElementById("myBtn").onclick=function() {
displayDate()
};
3.6.4 onload 和 onunload 事件
- onload 和 onunload 事件会在用户进入或离开页面时被触发。
- onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
- onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">
3.6.5 onchange 事件
onchange 事件常结合对输入字段的验证来使用。
//当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">
3.6.6 onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#grey;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
3.6.7 onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
<div onmousedown="mDown(this)" onmouseup="mUp(this)" >original page.</div>
<script>
function mDown(obj){
obj.innerHTML="Release Me";
}
function mUp(obj) {
obj.innerHTML="Thank You!!!";
}
</script>
