概要
HTML DOM(文件格式第一类数学模型)
当页面被应用程序读取时,应用程序会建立文件格式第一类数学模型(Document Object Model)。
HTML DOM 会被形式化正式成为两个第一类树:
透过那个第一类数学模型,java
JavaScript 能发生改变页面中的大部份 HTML 原素
JavaScript 能发生改变页面中的大部份 HTML 属性
JavaScript 能改变页面中的大部份 CSS 式样
JavaScript 能删掉已近的 HTML 原素和属性
JavaScript 能加进捷伊 HTML 原素和属性
JavaScript 能对页面中大部份已近的 HTML 该事件作出反应
JavaScript 能在页面中建立捷伊 HTML 该事件
HTML DOM 能够透过 JavaScript 进行访问。
在 DOM 中,大部份 HTML 原素都被定义为第一类。
可以透过发生改变第一类的属性来发生改变原素状态
也可以使用DOM方法来加进删掉原素
DOM原素
查找 HTML 原素
document.getElementById(id) 透过原素 id 来查找原素
document.getElementsByTagName(name) 透过标签名来查找原素
document.getElementsByClassName(name) 透过类名来查找原素
如果您需要查找匹配指定 CSS 选择器(id、类名、类型、属性、属性值等等)的大部份 HTML 原素,请使用 querySelectorAll() 方法。(querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。)
改变 HTML 原素
element.innerHTML = new html content 发生改变原素的 inner HTML
element.attribute = new value 发生改变 HTML 原素的属性值
element.setAttribute(attribute, value) 发生改变 HTML 原素的属性值
element.style.property = new style 发生改变 HTML 原素的式样
表单验证
HTML 表单验证可以透过 JavaScript 完成。
如果表单域 (fname) 为空,该函数会提示一条消息,并返回 false,以防止表单被提交:
JavaScript 实例
function validate() {
let value = document.forms[“firstForm”][“txtname”].value;
if (value == “”) {
Console.log(“Name cannot be null”);
return false;
}
}
提交表单时可以调用该函数:
HTML 表单实例
<form name=”firstForm” action=”/action_page.php” onsubmit=”return validate()” method=”post”>
Name: <input type=”text” name=”txtname”>
<input type=”submit” value=”Submit”>
</form>
HTML 约束验证
HTML5 引入了一种捷伊 HTML 验证概念,称为约束验证。
HTML 约束验证基于:
约束验证 HTML input 属性
约束验证 CSS 伪选择器
约束验证 DOM 属性和方法
该事件
比较常用的该事件类型有:
Onclick 点击该事件
onload 页面读取该事件
onunload 页面离开该事件
onchange 内容发生改变该事件
onmousedown 按钮点击该事件
onmouseup 按钮释放该事件
还可以透过element.addEventListener(event, function, useCapture)的语法为原素加进该事件
useCapture”参数来规定传播类型。false,将使用冒泡传播,如果该值设置为 true,则该事件使用捕获传播。默认是false。
var x = document.getElementById(“myBtn”);
if (x.addEventListener) { // 针对主流应用程序,除了 IE 8 及更正版本
x.addEventListener(“click”, myFunction);
} else if (x.attachEvent) { // 针对 IE 8 及更早版本
x.attachEvent(“onclick”, myFunction);
}
节点关系
parentNode 父亲节点
childNodes[nodenumber] 孩子节点
firstChild 第两个孩子节点
lastChild 最后两个孩子节点
nextSibling 下两个兄弟节点
previousSibling 前两个兄弟节点
节点的操作方法
createTextNode 建立文本节点
appendChild 追加孩子节点
insertBefore 在某节点前加进节点
removeChild 删掉孩子节点
replaceChild 替换孩子节点
集合和节点列表
childNodes属性返回的就是NodeList第一类即节点列表
HTMLCollection 与 NodeList 的区别
HTMLCollection是 HTML 原素的集合。
NodeList 是DOM节点的集合。
HTMLCollection 和 NodeList 第一类都是第一类列表(集合)。
它们都有项目数的 length 属性。
它们都可以透过索引访问每个项目。
可以透过名称、id 或索引号 来访问HTMLCollection中的各个对象。
NodeList只能透过索引号访问。
NodeList 第一类还包含属性节点和文本节点。
HTML第一类
document.anchors 返回拥有 name 属性的大部份 <a> 原素。
document.applets 返回大部份 <applet> 原素(HTML5 不建议使用)
document.baseURI 返回文件格式的绝对基准 URI
document.body 返回 <body> 原素
document.cookie 返回文件格式的 cookie
document.doctype 返回文件格式的 doctype
document.documentElement 返回 <html> 原素
document.documentMode 返回应用程序使用的模式
document.documentURI 返回文件格式的 URI
document.domain 返回文件格式服务器的域名
document.domConfig 废弃。返回 DOM 配置
document.embeds 返回大部份 <embed> 原素
document.forms 返回大部份 <form> 原素
document.head 返回 <head> 原素
document.images 返回大部份 <img> 原素
document.implementation 返回 DOM 实现
document.inputEncoding 返回文件格式的编码(字符集)
document.lastModified 返回文件格式更捷伊日期和时间
document.links 返回拥有 href 属性的大部份 <area> 和 <a> 原素
document.readyState 返回文件格式的(读取)状态
document.referrer 返回引用的 URI(链接文件格式)
document.scripts 返回大部份 <script> 原素
document.strictErrorChecking 返回是否强制执行错误检查
document.title 返回 <title> 原素
document.URL 返回文件格式的完整 URL
