Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Examples for: querySelector, elem.matchesSelector, elem.classList, elem.nextElementSibling, DOMContentLoaded, document.readyState
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NetTuts: From jQuery to JavaScript</title>
<script type="text/javascript">
var addEvent = (function () {
var filter = function(el, type, fn) {
for ( var i = 0, len = el.length; i < len; i++ ) {
addEvent(el[i], type, fn);
}
};
if ( document.addEventListener ) {
return function (el, type, fn) {
if ( el && el.nodeName || el === window ) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
filter(el, type, fn);
}
};
}
return function (el, type, fn) {
if ( el && el.nodeName || el === window ) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if ( el && el.length ) {
filter(el, type, fn);
}
};
})();
document.addEventListener("DOMContentLoaded", function() {
// addEvent(document.querySelectorAll('a'), 'click', function() {
// console.log(this);
// });
[].forEach.call(document.querySelectorAll("a"), function(el, i) {
// console.log(el, i);
})
document.addEventListener("click", function(e) {
// console.log(e.target.webkitMatchesSelector("ul"));
}, false);
[].forEach.call(document.querySelectorAll("#box li"), function(el, i) {
el.addEventListener("click", function(e) {
e.target.classList.toggle("wrap");
}, false);
});
var div = document.createElement("div");
div.innerHTML = "test";
document.querySelector("#container").appendChild(div);
// console.log(document.querySelector("#box").nextElementSibling);
});
function ready(cb) {
// console.log(document.readyState);
/in/.test(document.readyState) ? setTimeout("ready(" + cb + ")", 9) : cb();
}
ready(function() {
});
</script>
</head>
<body>
<div id="container">
<div id="box">
<ul id="list">
<li id="li1"><a href="#">link</a></li>
<li id="li2"><a href="#">link</a></li>
<li id="li3"><a href="#">link</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
@cfleschhut

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.