参考链接: W3school-JavaScript HTML DOM
参考文章:Han_python的博客的JavaScript专栏 14.
文档对象模型
Document Object Mode, 简称DOM。当网页被加载时，浏览器会创建页面的DOM。它定义了:
作为对象的 HTML 元素,
HTML 元素的属性（可设置或改变）
访问所有 HTML 元素的方法（动作）
所有 HTML 元素的事件
HTML DOM 模型被结构化为对象树：
方法getElementById() 和属性innerHTML
<body>
<p id="p01">The best things in life are free!</p>
<p id="demo">这个文本不显示,因为下面第二条又写了一次</p>
<script>
text = document.getElementById("p01").innerHTML;
document.getElementById("demo").innerHTML = "上面说得有道理";
</script>
</body>
例子中，
getElementById()使用id="demo"来查找元素。
使用innerHTML属性先获取，后替换元素内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>.
但是,对于没有内容的元素.如自结束标签，这个属性没有意义(input,img等)。
- 提醒：
下面的js函数/属性操作都是写在
<script>内，展示内容都是在<body>内。前者可以在后者内,或外。 不再赘述。
改变属性的值
document.getElementById(id).attribute = new value
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
原始图像是 smile.gif，但脚本将其更改为 landscape.jpg
找元素
查找 HTML 页面中的元素,还可以是以下方法:
var x = document.getElementsByTagName("p");
// 查找: 所有 <p> 元素
// 访问: x[0].innerHTML
var id_main = document.getElementById("main");
var y = id_main.getElementsByTagName("p");
// 首先查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素
还可以通过类名document.getElementsByClassName("intro"),通过css选择器document.querySelectorAll("p.intro");来查找。
视频的一些操作
此外,还可以使用以下方式,来改变video的一些属性值:JS调整视频倍速和视频跳转
按F12，找到console，输入
document.querySelector("video").playbackRate=2.5
document.querySelector("video").currentTime=60
其中,第一个是设置倍速为2.5; 视频跳转到1分钟,600就是10分钟
可以看到,视频有controlslist=nodownload,导致无法下载,那么,可以使用下面的办法消除:
参考video.controlslist=nodownload
document.querySelector('video').hasAttribute("controlslist") # true
document.querySelector('video').removeAttribute("controlslist") # undefined
还可以看到,tableindex=-1,本来,这个属性是获取html焦点的,规定元素的 tab 键次序。即连续按TAB键,可以变换焦点。取-1时，就获取不到了。
TABINDEX 属性
还可以看到:oncontextmenu='return false',禁止右键 οncοntextmenu=“return false” ：禁止右键
还有,video.data-setup={},可以参考这里:video js选项
data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'
js获取form表单中的所有元素
<!DOCTYPE html>
<html>
<body>
<h1>使用 document.forms 查找 HTML 元素</h1>
<form id="frm1" action="/demo/action_page.php">
First name: <input type="text" name="fname" value="Bill"><br>
Last name: <input type="text" name="lname" value="Gates"><br><br>
<input type="submit" value="提交">
</form>
<p>单击“试一试”按钮，显示表单中每个元素的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
点击事件onclick
当用户点击 <h1> 时，会改变为谢谢！
<body>
<h1 onclick="this.innerHTML='谢谢！'">请点击此文本！</h1>
</body>
还可以传入函数(注意是函数，不是对象)：
<body>
<button onclick="pop_alert()">我是一个按钮</button>
</body>
<script type="text/javascript">
function pop_alert(){
alert("你点我干嘛");
};
</script>
它和下面的是一样的：
<body>
<button id="btn">我是一个按钮</button>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("你点我干嘛");
};
</script>
或者直接写成：
document.getElementById("btn").onclick = pop_alert;
注意，这里是一个对象pop_alert，不是函数pop_alert().
鼠标事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数
// 注意,这个地方传入了this对象。
<div onmouseover="mOver(this)" onmouseout="mOut(this)" >请把鼠标移上来</div>
function mOver(obj) {
obj.innerHTML = "谢谢您"
}
function mOut(obj) {
obj.innerHTML = "请把鼠标移上来"
}
当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "松开鼠标";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢您";
}
文本改变事件
onfocus,当输入字段获得焦点时改变其背景色
function myFunction(x) {
x.style.background = "yellow";
}
请输入您的名字：<input type="text" onfocus="myFunction(this)">
onchange，经常与输入字段验证结合使用。下面，离开输入字段时，会触发一个函数，将输入文本转换为大写。
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase(); // 这里读取了元素的属性值，下一小节将更多
}
请输入您的名字：<input type="text" id="fname" onchange="myFunction()">
页面打开/关闭事件
onload事件：一张页面或者一幅图像完成加载。支持该事件的JS对象有：image、layer、window。
<head>
<script type="text/javascript">
window.onload = function(){ // 使script中的代码在页面加载完成之后执行。
var btn = document.getElementById("btn");
btn.innerHTML = "I am Button";
btn.onclick = function(){
alert("你点我干嘛");
};
};
</script>
</head>
<body>
<button id="btn"></button>
</body>
此外，当用户进入后及离开页面时，会触发 onload 和 onunload 事件。它们可用于处理 cookie。
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookie 已启用";
} else {
text = "Cookie 未启用";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
读获取到的对象的value等
这个例子中，读到了id=“fname”的value。
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase(); // 这里读取了元素的属性值，下一小节将更多
}
如果要读取元素节点属性，直接使用：元素.属性名
例如
元素.
id
元素.name
元素.value
元素.className,这里因为class是保留字,所以换了一个
其他
改变 HTML 元素
添加和删除元素
查找 HTML 对象,如forms,images,head等
参见:JavaScript HTML DOM 文档
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
