前端开发之 DOM 元素

Question

兼容性要求：兼容到 IE8

closestElement(element, className)

兼容实现返回从自身开始向上查找符合 className 的最近元素。

elementSiblings(element)

兼容实现返回元素的兄弟元素集合（不包含自身）。

selectChildElement(parentElement, childIndex)

兼容实现选择第几个子元素。

• childIndex >= 0时，表示子元素正向的索引值。
• childIndex < 0时，表示子元素的倒数索引值，即-1表示最后一个子元素。

createNode(nodeName[, nodeValue])

根据传入的 nodeName 与 nodeValue 创建相对应的节点。

insert(sourceNode, targetNode[, position])

兼容实现根据传入的移动位置来移动原始节点到目标节点的相应位置。

位置属性如下

[beforebegin]
<div>
[afterbegin]
.....
[beforeend]（默认）
</div>
[afterend]

moveChildren(parentElement, target, filter)

兼容性实现按 filter 要求修改子元素并且移动该元素到目标容器内。

ul.source
  - li
  - li
  - li
  
ul.target
  - li.item0
  - li.item1
  - li.item2

上述结果的filter方法为：

function filter(index, element){
    this.className = 'item' + index;
}

elementData(element, dataName[, dataValue])

兼容性实现 element dataset 功能，具体实现如下：

elementData(element, dataName);
=> dataValue
elementData(element, dataName, dataValue);
=> element

parseURL(url)

解析一段 URL，返回一个对象，包含以下属性：

• href：原始 url
• protocol：原始 url 协议
• host：原始 url 域
• hostname：原始 url 域名
• port：原始 url 端口
• pathanme：原始 url 的路径
• search：原始 url 的查询字符串
• hash：原始 url 的 hash

setCookie(name, value[, properties])

设置 cookie，其中可选的 properties 包含以下属性：

• path：设置 cookie 的字段
• domain：设置 cookie 的域
• expires：设置 cookie 的过期时间
• secure：设置 cookie 是否只在 https 下发送给服务端
• httpOnly：设置 cookie 是否只允许 http 协议可读，即脚本无法直接读取

getCookie(name, value[, properties])

读取 cookie，其中可选的 properties 包含的属性与setCookie一致。

getElementsBySelector(selector[, parentElement])

兼容性实现，根据选择器，返回匹配元素数组。选择器只包含

• #id
• .classname
• tagname
• 以及三者的组合

getElementsBySelector('div.box');

addEvent(element, eventType, listener)

兼容性实现 DOM 事件监听。

removeEvent(element[, eventType[, listener]])

兼容性实现 DOM 事件解除监听。可选参数情况如下：

• eventType和listener都为空时，移除所有通过 addEvent 方法绑定在 element 上的事件。
• listener为空时，移除所有通过 addEvent 方法绑定在 element 上的 eventType 类型事件。
• 参数都不为空时，移除listener事件。

事件监听顺序

以下事件都在 window.onload 之后绑定。

function clickme(){
    alert(1);
}

<button id="btn" onclick="clickme()">click me</button>

var $btn = document.getElementById('btn');

$btn.onclick = function(){
    alert(2);
};

addEvent($btn, 'click', function(){
    alert(3);
});

实现拖拽功能

drag(element).on('dragstrart', function(eve){
    // 开始拖拽
}).on('drag', function(eve){
    // 拖拽中
}).on('dragend', function(eve){
    // 拖拽结束
});

实现轻触、长触、双触功能

drag(element).on('tap', function(eve){
    // 轻触之后
}).on('longtap', function(){
    // 长触之后
}).on('dbltap', function(){
    // 双触之后
});

domReady(fn)

DOM 准备完毕之后执行回调

throttle(fn[, timeout])/debounce(fn[, timeout])

兼容性实现事件频率控制。

• throttle：每次事件触发回调，必须在上一次触发的 timeout 毫秒之后。
• debounce：最后一次事件触发回调，必须在最后一次触发的 timeout 毫秒之后。
• timeout：默认为 123ms。

window.onload = throttle(function(eve){
    // 0
    // 123
    // 236
    // ...
});
window.onload = debounce(function(eve){
    // 123
});

dispatchEvent(element, eventType[, eventArg0, eventArg1, ...])

配合 addEvent，兼容性实现事件触发器。

addEvent(element, 'myevent', function(a, b, c){
    // a = 1
    // b = 2
    // c = 3
});
dispatchEvent(element, 'myevent', 1, 2, 3);

style(element, styleKey, styleVal)

兼容性实现设置、获取元素的样式。

style(element, 'width'); //=> "100px"
style(element, 'width', 200); //=> "200px"