操作DOM元素

getElementById("id名")

getElemensByClassName("class类名")

getElementsByTagName("标签名")

querySelector("id名 | class类名 | 标签名") 需要加点和井号

querySelectorAll("class类名 | 标签名") 需要加点

document.body 获取body标签

document.documentElement 获取html标签

点属性名

getAttribute("属性名")

setAttribute("属性名"，"属性值")

dataset点属性名

removeAttribute("属性名")

parentNode

childNodes

children

nextSibling

previousSibling

nextElementSibling

previousElementSibling

nodeType 节点类型元素节点=1，文本节点=3

onfocus

onblur

createElement

appendChild

insertBefore(新标签,指定位置)

1、获取元素节点

(1)获取id类型标签元素 getElementById("id名")

<body>
    <div id="header">getElementById获取标签</div>
    <script>
        // getElementById(id)  获取ID标签元素
        // id是大小写敏感的字符串，代表了所要查找的元素的唯一ID
        // 返回一个匹配到ID首位DOM Element 对象 若在当前Document 下没有找到，则返回null
        var he = document.getElementById("header");
        console.log(he);
    </script>
</body>

(2)获取class类型标签元素

var row = document.getElementsByClassName("row"); //单纯获取

var row = document.getElementsByClassName("row")[0]; //获取第一个class

(3)获取标签元素

 var ul = document.getElementsByTagName('ul');

(4)获取元素节点(新方法)

//获取标签元素 

var div = document.querySelector('div')

//获取class类型标签元素

var nav = document.querySelector('.nav');

//获取所有的class类型标签元素
var navs = document.querySelectorAll('.nav');

//获取id类型标签元素

var cont = document.querySelector('#cont');

//获取所有的li标签元素

var cont = document.querySelectorAll('li');

(5)获取特殊元素 body html

// 获取特殊元素 body html
 var bodyEle = document.body;
 console.log(bodyEle);

 var htmlEle = document.documentElement;
 console.log(htmlEle);

(6)获取自定义属性值

<body>
    <div id="demo" data-index="20">
        <div id="cont"></div>
    </div>
    <ul>
        <li>元素节点1</li>
        <li>元素节点2</li>
        <li>元素节点3</li>
        <li>元素节点4</li>
        <li>元素节点5</li>
    </ul>

    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
    </ul>
    <script>
        var div = document.querySelector("div");
        // 获取属性值/
        console.log(div.id);
        console.log(div.getAttribute("id"));
        // dataset  是获取h5提供的方法 获取data- 开头的自定义属性的值
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        //设置属性值
        console.log(div.id = "test");
        div.setAttribute("id", "test1")
        console.log(div.id);
        // 删除属性值
        div.removeAttribute("id")
        console.log(div.id);

        // 获取父节点(亲爸爸) parentNode
        var cont = document.querySelector('#cont');
        console.log(cont.parentNode);

        // 获取子节点 childNodes  所有的子节点 元素节点的nodeType=1，文本节点的nodeType=3； nodeType 节点类型
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);

        // 获取子元素节点 children
        console.log(ul.children);

        // 获取指定元素  重点(开发中最常使用的)
        console.log(ul.children[0]); // 第一个元素节点
        console.log(ul.children[ul.children.length - 1]); //最后一个元素节点

        // firstChild lastChild  获取第一个节点  最后一个节点 包含(文本节点和元素节点)
        console.log(ul.firstChild);
        console.log(ul.lastChild);

        // 获取元素节点 firstElementChild   lastElementChild 有兼容性问题 IE9以上的浏览器才兼容
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);


        var nav = document.querySelector('.nav');
        for (var i = 0; i < nav.children.length; i++) {
            nav.children[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            nav.children[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

(7)获取兄弟节点

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // nextSibling 下一个兄弟节点 包含元素节点或文本节点
        console.log(div.nextSibling); //下一个节点
        console.log(div.previousSibling); //上一个节点
        console.log(div.nextElementSibling); // 下一个元素节点
        console.log(div.previousElementSibling); // 上一个元素节点 找不到，返回空null


        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if (el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }
        console.log(getNextElementSibling(div));
    </script>
</body>

(8)获取光标和失去光标

<h1>获取光标和失去光标</h1>
    <input value="手机" type="text"></input>
 
    <h1>判断输入的信息是否符合要求，并作出提示</h1>
    <div class="yn">
        <label class="" for="">
            <!-- 图片文字水平垂直居中  img设置align属性值为absmiddle -->
            <img id="img" src="/images/ts.png" align='absmiddle' alt="">
            <span id="sp">6-16位(字母,数字,字符)组成，区分大小写</span>
        </label>
        <input type="password" id="pwd" name="password"></input>
    </div>
 
// 获取光标和失去光标
        var text = document.querySelector('input');
        text.onfocus = function() {
            if (this.value === '手机') {
                this.value = '';
                this.style.color = '#333';
            }
        }
        text.onblur = function() {
            if (this.value === '') {
                this.value = '手机';
                this.style.color = '#999';
            }
        }
 
 
        // element.className = 'first';   修改类样式  多个可以这样写 element.className = 'first change';
 
 
        // 判断输入的信息是否符合要求，并作出提示
        var pwd = document.querySelector('#pwd');
        var img = document.querySelector('#img');
        var sp = document.querySelector('#sp');
        pwd.onblur = function() {
            if (this.value.length < 6 || this.value.length > 16) {
                img.src = '/images/no.png';
                sp.innerHTML = '不符合要求，请重新输入！';
                sp.style.color = '#f3270d';
            } else {
                img.src = '/images/yes.png';
                sp.innerHTML = '可以使用！';
                sp.style.color = '#1afa29';
            }
 
        }　

2、创建和添加元素节点

<body>
    <ul></ul>
    <script>
        // 1、创建元素节点 createElement
        var li = document.createElement("li");
        // 2、添加元素节点 node.appendChild(child) 追加元素节点
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3、添加元素节点 node.insertBefore(child,指定元素)  指定的元素节点前添加元素节点
        var lili = document.createElement("li");
        ul.insertBefore(lili, ul.children[0]);

        // 添加一个新的元素节点，先创建后添加，创建的元素节点只能使用一次
    </script>
</body>