HTML DOM 是 HTML 的标准对象模型和编程接口。
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
demo:
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>上述例程中：getElementById是方法innerHTML是属性（用于获取改变html内容）。
查找 HTML 元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
改变 HTML 元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
document.write在页面加载完成使用会导致整个页面被覆盖
参见w3schoolJavaScript HTML DOM 文档
通过css选择器查找元素：
demo：
var x = document.querySelectorAll("p.intro");通过dom操作改变属性的值：
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
JavaScript表单验证：
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>上述JavaScript通过html对象选择器获取到表单名称为myForm的表单的名称诶fname的输入框的值。
判断是否为空，空则弹出警告框。
demo：
<script>
function test(){
var x = document.forms['form1']['fname'].value;
if(x>9 || x <0){
alert('no');
}
}
</script>
<form action="" name = 'form1'>
请输入数字：<input type="number" name = 'fname'>
<input type="button" value="提交" onclick="test()">
</form>上述代码建立了一个表单，通过html对象选择器获取到表单当中的输入框的值，判断是否合法，不合法则弹出警告框no。
通过dom操作改变css：
demo：
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
点击我！
</button>
</body>
</html>该button设置了一个事件，获取id为id1的元素，改变它的css样式，颜色改为red。
利用JavaScript对dom的操作做一个小动画：
<div id="container">
<div id = 'donghua'>我的动画</div>
</div>
<script>
var elem = document.getElementById('donghua');
var pos = 0;
var id = setInterval(myfunction, 5);
function myfunction(){
if(pos == 350){
clearInterval(id);
}
else{
pos ++;
elem.style.top = pos+ 'px';
elem.style.left = pos + 'px';
}
};
</script>
通过点击文字改变html的元素：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>
</body>
</html> 为button指定事件：
<script>
document.getElementById("myBtn").onclick = displayDate;
</script> JavaScript HTML DOM 事件说明了利用dom事件的操作（onmouseover 和 onmouseout 事件等）
DOM的事件监听程序：
element.addEventListener(event, function, useCapture);
document.getElementById("myBtn").addEventListener("click", displayDate);首先获取id为myBtn的元素，添加一个事件监听函数displayDate；
该事件监听不会覆盖已经有的click事件，一个事件可以有多个同样的方法。
能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。
demo：
element.addEventListener("click", function(){ alert("Hello World!"); });单击该元素会弹出hello world
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：
element.removeEventListener("mousemove", myFunction);dom树的关系：
以下三种方式均为对元素内容的访问：
var myTitle = document.getElementById("demo").innerHTML;var myTitle = document.getElementById("demo").firstChild.nodeValue;var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
nodename属性：
返回id为id01的元素名：document.getElementById("id01").nodeName
nodevalue属性：
基本和innerHTML无异，返回元素内容。
nodeType 属性返回节点的类型（无例子。。）
添加或删除dom树当中的节点：
如需向 HTML DOM 添加新元素，必须首先创建这个元素（元素节点），然后将其追加到已有元素。
demo：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");//创建元素
var node = document.createTextNode("这是新文本。");//创建文本节点
para.appendChild(node);//向p元素追加文本节点
var element = document.getElementById("div1");
element.appendChild(para);//向div当中追加新创建的元素
</script>前面例子中的 appendChild() 方法，追加新元素作为父的最后一个子元素。
除此之外您还可以使用 insertBefore() 方法（追加新元素作为父的第一个子元素）
如需删除某个 HTML 元素，您需要知晓该元素的父：
demo：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>如需替换元素的，请使用 replaceChild() 方法
demo：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>JavaScript HTML DOM 集合：
getElementsByTagName() 方法返回 HTMLCollection 对象。
demo：
var x = document.getElementsByTagName("p");//获取所有的p元素集合
y = x[1];//第二个p元素
x.length//p元素的个数
由该方式获取的集合并非数组，虽然可以遍历。
HTML DOM NodeList 对象：
NodeList 对象与 HTMLCollection 对象几乎相同。
demo：
var myNodeList = document.querySelectorAll("p");
y = myNodeList[1];
myNodeList.length;HTMLCollection是 HTML 元素的集合。
NodeList 是文档节点的集合。
NodeList 和 HTML 集合几乎完全相同。
HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
浏览器对象模型（Browser Object Model (BOM)）
不存在浏览器对象模型（BOM）的官方标准。
现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：
window.document.getElementById("header");等同于：
document.getElementById("header");
获取当前窗口的尺寸：
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 其他窗口方法
一些其他方法：
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() -移动当前窗口
- window.resizeTo() -重新调整当前窗口
window.screen 对象包含用户屏幕的信息。
window.screen 对象不带 window 前缀也可以写：
属性：
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth
- screen.pixelDepth
JavaScript Window Location:
可用于获取当前页面的url以及定位到其他url
一些例子：
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议（http: 或 https:）
- window.location.assign 加载新文档
window.location.href;//返回当前的url
window.location.hostname;//返回当前的主机名，例如tronsafe.cn
window.location.pathname;//返回当前的路劲名，例如：index.php/test/
window.location.protocol;//返回页面的协议，例如：http:
window.location.assign("https://www.w3school.com.cn");//加载到w3schoolwindow.history 对象包含浏览器历史:
一些方法：
- history.back() - 等同于在浏览器点击后退按钮
- history.forward() - 等同于在浏览器中点击前进按钮
window.navigator 对象包含有关访问者的信息：
一些例子：
- navigator.appName
- navigator.appCodeName
- navigator.platform
JavaScript 有三种类型的弹出框：警告框、确认框和提示框：
alert即为警示框。
确认框：
window.confirm("sometext");
demo：
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认！";
} else {
x = "您按了取消！";
}用户单击确认会返回布尔值真，否则假。
提示框：
demo：
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}使用prompt会强行弹出一个窗口让用户输入，第二个参数为弹出窗口文本的默认值，如果用户没有输入则会返回null。
JavaScript Timing 事件:（之前有讲过）
window 对象允许以指定的时间间隔执行代码。
这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)
创建cookies
document.cookie = "username=Bill Gates";
修改cookies
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
删除cookies（修改expires为一个以前的时间）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
访问cookies
document.cookie即可
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
