Javascript-DOM

Posted on | In , | Visitors:

This is my blog.

DOM：对XML（也可以HTML）的应用程序编程接口（API），提供访问和操作网页内容的方法和接口

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

  • javaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素x=document.getElementById("xxx");
  • 通过标签名找到 HTML 元素x.getElementsByTagName("yyy")
  • 通过类名找到 HTML 元素x=document.getElementsByClassName("xxx");

改变HTML

改变HTML输出流

  • 在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容

改变HTML内容

  • 修改 HTML 内容的最简单的方法是使用 innerHTML 属性
  • 语法document.getElementById(id).innerHTML=新的 HTML

改变HTML属性

  • 语法：document.getElementById(id).attribute=新属性值

  • 例子：

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <img id="image" src="smiley.gif" width="160" height="120">
    <script>
    document.getElementById("image").src="landscape.jpg";
    </script>
    <p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>
    </body>
    </html>

改变CSS

语法：document.getElementById(id).style.property=新样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>

DOM事件

DOM使 JavaScript 有能力对 HTML 事件做出反应

  • 点击：

    首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件

    • onclick=JavaScript
      • 向HTML元素分配事件
        • <button onclick="displayDate()">点这里</button>
      • DOM向HTML分配事件
        • <button id="myBtn">点这里</button>
        • <script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>

  • 进入页面onload，onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本

    • <body onload="checkCookies()">

  • 离开页面onunload

  • 用户改变内容时onchange

    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <head>
      <script>
      function myFunction(){
      	var x=document.getElementById("fname");
      	x.value=x.value.toUpperCase();
      }
      </script>
      </head>
      <body>
      输入你的名字: <input type="text" id="fname" onchange="myFunction()">
      <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
      </body>

  • 移至HTML元素上方onmouseover或移出元素时onmouseout

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <body>
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;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>
    </body>

  • 当输入字段获得焦点时onfocus

    • 例如，当你想要填入文本框，首先必定会单击选中，这时候onfocus就可以做出一些动作了

具体分类看链接的第四节

onerror

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
onerror=handleErr;
var txt="";
function handleErr(msg,url,l){
	txt="该页面有一个错误\n\n";
	txt+="错误: " + msg + "\n";
	txt+="URL: " + url + "\n";
	txt+="行: " + l + "\n\n";
	txt+="点击确定继续。\n\n";
	alert(txt);
	return true;
}
function message(){
	adddlert("Welcome guest!");
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>

EventListener&removeEventListener

语法：element.addEventListener(event, function, useCapture);

  • 第一个参数是事件的类型 (如 “click” 或 “mousedown”)，注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”

  • 第二个参数是事件触发后调用的函数，可以使用匿名函数调用带参数的函数

    例如：element.addEventListener("click", function(){ myFunction(p1, p2); });

  • 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的；默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递

    • 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：<p> 元素的点击事件先触发，然后会触发 <div>元素的点击事件
    • 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发<p> 元素的点击事件

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件

例如：document.getElementById("myBtn").addEventListener("click", displayDate);

也可以对window对象添加事件句柄

例如：当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext; });

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

在早期版本中，不支持上述函数，而是用下述两个来代替的

element.attachEvent(event, function);

element.detachEvent(event, function);

跨浏览器解决方法：

1
2
3
4
5
6
var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

DOM元素（节点）

appendChild()

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它，添加新元素到尾部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
//创建 <p> 元素
var para = document.createElement("p");
//为 <p> 元素添加文本节点
var node = document.createTextNode("这是一个新的段落。");
//将文本节点添加到 <p> 元素中
para.appendChild(node);
//在一个已存在的元素中添加 p 元素
var element = document.getElementById("div1");
element.appendChild(para);
</script>

insertBefore()

将新元素添加到开始位置

removeChild()

移除一个元素，但需要知道该元素的父元素

1
2
3
4
5
6
7
8
9
10
<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>

查找父元素也可以如此：

1
2
var child = document.getElementById("p1");
child.parentNode.removeChild(child);

replaceChild()

替换 HTML DOM 中的元素

1
parent.replaceChild(newpara, child);

DOM集合

getElementsByTagName() 方法返回 HTMLCollection 对象

访问第二个<p> 元素可以y = x[1];

HTMLCollection 对象的 length 属性定义了集合中元素的数量

HTMLCollection 看起来可能是一个数组，但其实不是。你可以像数组一样，使用索引来获取元素；但HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join()

DOM节点列表

NodeList 对象是一个从文档中获取的节点列表 (集合)

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象【和getElementsByTagName()不同】

所有浏览器的 childNodes 属性返回的是 NodeList 对象

大部分浏览器的 querySelectorAll() 返回 NodeList 对象

NodeList 对象 length 属性定义了节点列表中元素的数量

HTMLCollection 与 NodeList

  • HTMLCollection 是 HTML 元素的集合；NodeList 是一个文档节点的集合
  • HTMLCollection 元素可以通过 name，id 或索引来获取；NodeList 只能通过索引来获取
  • 只有 NodeList 对象有包含属性节点和文本节点
  • NodeList 与 HTMLCollection 有很多类似的地方。
    • NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素
    • NodeList 与 HTMLCollection 都有 length 属性。

节点列表不是一个数组！，节点列表看起来可能是一个数组，但其实不是。你可以像数组一样，使用索引来获取元素。但节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join()

约束验证DOM方法

Property Description
checkValidity() 如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity() 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>
</body>
</html>

约束验证DOM属性

属性 描述
validity 布尔属性值，返回 input 输入值是否合法
validationMessage 浏览器错误提示信息
willValidate 指定 input 是否需要验证

Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性:

属性 描述
customError 设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch 设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow 设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow 设置为 true, 如果元素的值小于它的最小值。
stepMismatch 设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch 设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing 设置为 true，如果元素 (required 属性) 没有值。
valid 设置为 true，如果元素的值是合法的。

Document

Element

Attributes

Events

元素对象

  • Anchor

  • Area

  • Base
  • Body
  • Button
  • Form
  • Frame/IFrame
  • Frameset
  • Image
  • Input Button
  • Input Checkbox
  • Input File
  • Input Hidden
  • Input Password
  • Input Radio
  • Input Reset
  • Input Submit
  • Input Text
  • Link
  • Meta
  • Object
  • Option
  • Select
  • Style
  • Table
  • td / th
  • tr
  • Textarea

后记

2019.02.26

还有些没看到呢，之后再补补

2019.03.02

看的差不多了，然后发现还得看看html，css啥的

不过决定好好看看应用实例，看看JavaScript部分能不能先看懂了

转载请注明出处，谢谢。

愿 我是你的小太阳

买糖果去喽