若网络条件允许,可以直接看我的个人博客,可能阅读体验更好
点击查看
浏览器部分bug
<form id="form" action="/conceal">
<input type="text" id="action" />
<input type="submit" id="submit" />
</form>
<script>
document.getElementById('form').submit();
// TypeError: document.getElementById(...).submit is not a function
</script>
- 浏览器将表单里引用的每个input元素都作为
<form>
元素的属性了。当所添加属性的名称是input属性的id
值时就可能会出现问题了。如果id值恰好是form元素已经存在的属性,这些原始属性就会被新属性取而代之,如action
或submit
。- 因此,在创建
input#submit
元素之前,form.action
引用指向的是<form>
的action
特性的值,但在创建元素之后,指向的就是input#submit
元素了。
特征仿真
window.findByTagWorksAsExpected = (function() {
var div = document.createElement('div');
div.appendChild(document.create('test'));
return div.getElementsByTagName('*').length === 0;
})();
元素特性和属性
特性(attribute)是DOM构建的一个组成部分,而属性(property)是元素保持运行时信息的主要手段,并且通过属性可以访问这些运行时信息。
var image = document.getElementsByTagName('img')[0];
var newSrc = 'images/kong.png';
image.src = newSrc;
console.log(image.src); // file:///F:/Web/sublimeProject/test/images/kong.png
console.log(image.getAttribute('src')); // images/kong.png
自定义特性的行为
如果不确定一个特性的属性是否存在,可以对其进行测试,如果不存在的话再使用DOM方法。eg、
var value = element.someValue? element.someValue: element.getAttribute('someValue');
URL规范化
在访问一个引用了URL的属性(eg,href,src或action),该URL值会自动将原始值转换成完整规范的URL。
获取计算样式
Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值,并解析这些值可能包含的任何基本计算。
语法
let style = window.getComputedStyle(element, [pseudoElt]);
element
:用于获取计算样式的ElemenpseudoElt
:可选。指定一个要匹配的伪元素的字符串。必须对普通元素省略(或null)。- 返回的样式是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。该对象提供一个名为
getPropertyValue()
的方法,接受CSS属性名称(如font-size和background-color),而不是“驼峰式”格式的名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试getComputedStyle方法</title>
<style>
#box {
font-size: 16px;
}
</style>
</head>
<body>
<div id="box">我是box</div>
<script>
var oBox = document.getElementById('box');
var compSty = window.getComputedStyle(oBox);
console.log(compSty.getPropertyValue('font-size')); // 16px
oBox.style.fontSize = '14px';
console.log(compSty.getPropertyValue('font-size')); // 14px
</script>
</body>
</html>
绑定和解绑事件处理程序
- IE9之前版本:
attachEvent()
和detachEvent()
方法 - 现代浏览器:
addEventListener()
和removeEventListener()
方法
冒泡与委托
一个元素被单击的时候可以通过event.target获得该元素的引用。
// 将事件处理委托给表格元素+
var table = document.getElementById('someId');
table.addEventListener('click',function(event) {
if(event.target.tagName.toLowerCase() == 'td') {
event.target.style.backgroundColor = 'yellow';
}
});
向DOM中注入HTML
有些HTML元素在被注入之前,必须存放在特定的容器元素中,例如,<option>
元素必须放在<select>
中。需要使用特定容器元素进行包装的问题元素有7个:
* <option>
and < optgroup>
need to be contained in a <select multiple="multiple">...</select>
* <legend>
needs to be contained in a <fieldset>...</fieldset>
* <thead>
, < tbody>
, < tfoot>
, < colgroup>
, and < caption>
need to be contained in a<table>...</table>
* <tr>
needs to be in a <table><thead>...</thead></table>
, <table><tbody>...</tbody></table>
, or <table><tfoot>...</tfoot></table>
* <td>
and <th>
need to be in a <table><tbody><tr>...</tr></tbody></table>
* <col>
must be in a <table><tbody></tbody><colgroup>...</colgroup></table>
* <link>
and <script>
need to be in a <div></div><div>...</div>