JavaScript - Easy to get DOM

2013-12-07

/posts/2013-12-07-javascript-easy-to-get-dom/

JavaScript

Table of Contents

# JavaScript - Easy to get DOM

It is old way to use getElementById, getElementsByTagName …

New method is use querySelector and querySelectorAll

If use IE, it only for IE8 up.

Make them as a method

var node;
function node(selector) {
    if (selector.indexOf('.') === -1) {
        if (document.querySelectorAll(selector).length === 1) {
            return document.querySelector(selector);
        }
        return document.querySelectorAll(selector);
    }
    return document.querySelectorAll(selector);
}

And then use it

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>querySelector</title>
</head>
<body>
    <div id="box" class="area">
        test
    </div>
    <div class="area">
        test2
    </div>
    <div id="selector" class="area">
        <p class="con">
            content
        </p>
    </div>
</body>
<script>
var node;
function node(selector) {
    if (selector.indexOf('.') === -1) {
        if (document.querySelectorAll(selector).length === 1) {
            return document.querySelector(selector);
        }
        return document.querySelectorAll(selector);
    }
    return document.querySelectorAll(selector);
}

console.log('ID', node('#box'));
console.log('CLASS', node('.area'));
console.log('SELECTOR_1', node('#selector p'));
console.log('SELECTOR_2', node('.area .con'));
</script>
</html>