task002_3-DOM

发表于   |   分类于   |  

为element增加一个样式名为newClassName的新样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 先定义一个hasClass函数
function hasClass(element, className) {
    var classNameList = element.className.split(' ');
    if (classNameList.indexOf(className) === -1) {
        return false;
    } else {
        return true;
    }
}
function addClass(element, newClassName) {
    if (!hasClass(element, newClassName)) {
        element.className += ' ' + newClassName;
    }
}

移除element中的样式oldClassName

1
2
3
4
5
function removeClass(element, oldClassName) {
    if (hasClass(element, oldClassName)) {
        element.className = element.className.replace(oldClassName, '')
    }
}

判断siblingNode和element是否为同一个父元素下的同一级的元素，返回bool值

1
2
3
function isSiblingNode(element, siblingNode) {
    return element.parentNode === siblingNode.parentNode;
}

获取element相对于浏览器窗口的位置，返回一个对象{x, y}

1
2
3
4
5
6
function getPosition(element) {
    var position = {};
    position.x = element.getBoundingClientRect().left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
    position.y = element.getBoundingClientRect().top + Math.max(document.documentElement.scrollLeft, document.body.scrollTop);
    return position;
}

挑战mini $

任务：接下来挑战一个mini $，它和之前的$是不兼容的，它应该是document.querySelector的功能子集，在不直接使用document.querySelector的情况下，在你的util.js中完成以下任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 实现一个简单的Query
function $(selector) {
}
// 可以通过id获取DOM对象，通过#标示，例如
$("#adom"); // 返回id为adom的DOM对象
// 可以通过tagName获取DOM对象，例如
$("a"); // 返回第一个<a>对象
// 可以通过样式名称获取DOM对象，例如
$(".classa"); // 返回第一个样式定义包含classa的对象
// 可以通过attribute匹配获取DOM对象，例如
$("[data-log]"); // 返回第一个包含属性data-log的对象
$("[data-time=2015]"); // 返回第一个包含属性data-time且值为2015的对象
// 可以通过简单的组合提高查询便利性，例如
$("#adom .classa"); // 返回id为adom的DOM所包含的所有子节点中，第一个样式定义包含classa的对象

没有头绪 >_< !!