DOM操作js

http://www.cnblogs.com/wupeiqi/articles/5643298.html

笔记：

　　

Dom
    1、找到标签
        获取单个元素        document.getElementById('i1')
        获取多个元素（列表）document.getElementsByTagName('div')
        获取多个元素（列表）document.getElementsByClassName('c1')
        a. 直接找
            document.getElementById             根据ID获取一个标签
            document.getElementsByName          根据name属性获取标签集合
            document.getElementsByClassName     根据class属性获取标签集合
            document.getElementsByTagName       根据标签名获取标签集合
        
        b. 间接
            tag = document.getElementById('i1')
            
            parentElement           // 父节点标签元素
            children                // 所有子标签
            firstElementChild       // 第一个子标签元素
            lastElementChild        // 最后一个子标签元素
            nextElementSibling     // 下一个兄弟标签元素
            previousElementSibling  // 上一个兄弟标签元素
            
    2、操作标签
        
        a. innerText
            
            获取标签中的文本内容
            标签.innerText
            
            对标签内部文本进行重新赋值
            标签.innerText = ""
            
        b. innerHTML
            
            获取html 含有标签
            
        c. className
            tag.className =》 直接整体做操作
            tag.classList.add('样式名')   添加指定样式
            tag.classList.remove('样式名')   删除指定样式
    
            PS：
            
                <div onclick='func();'>点我</div>
                <script>
                    function func(){
                    
                    }
                
                </script>
    
        d. checkbox  
                获取值
                checkbox对象.checked
                设置值
                checkbox对象.checked = true
                
页面事件：
    a. onclick= 点击鼠标
    b. onfocus= 当光标移入
    c. onblur=  当鼠标移出
    d. console.log() 浏览器console调试栏输出
    e. alert(弹窗)
    f. confirm(确定/取消确认框)
        var v = confirm('真的要取消吗？') //选择确定，取值true，取消取值false
    g. 获取当前页面url
        location.href
        location.href='http://www.baidu.com' //重定向
        location.href=location.href //刷新
        location.reload() //刷新
    h. 定时器
        setTimeout(匿名函数，超时时间)
        clearTimeout(取消定时器运行)
        setInterval(匿名函数,循环时间间隔)
        
        倒计时应用 ：点击删除后提示几秒后提示消失。
        示例代码：
            function warn_info() {
                tag = document.getElementById('shanchu');
                tag.innerText = '已删除';
                var t = setTimeout(function () {tag.innerText = '';},3000)
            }
        循环应用：
        示例代码：
            function while_info() {
            tag = document.getElementById('while');
            setInterval(function () {
                console.log('1')
            },2000)
        }
    i. onmouseover 鼠标移入
    j. onmouseout  鼠标移出
样式操作：
    a. className
    
    b.     整个样式操作：
        classList.add
        classList.remove
    
    c.     对样式中个别参数调整，通过.style.样式 = 'value';来设置，注意这里的样式名是css里面去掉中横线，后面单词首字母的连写。
        如：css里面写font-size:10px;通过此方法需要写成.style.fontSize = 'value';
        var obj = getElementById('i1')获取标签后
        obj.style.fontSize = '17px';
        例如：
        tag
            <input id="i1" onblur="Blur();"  onfocus="Focus();" type="text" value="请输入关键字">
        tag.style.color = 'red';
        "red"
        tag.style.fontSize = '15px';
        "15px"
        tag 就变成了
            <input id="i1" onblur="Blur();" onfocus="Focus();" type="text" value="请输入关键字" style="color: red; font-size: 15px;">

属性操作：
    tag.setAttribute('style','color:red')
    tag.setAttribute('value','color:red')
    tag.getAttribute('value')
    tag.getAttributeNames()
    tag.attributes
    
    
标签操作：
    
    标签事件：
        tag_obj.onmouseover= function () {this.style.backgroundColor = '';} //当鼠标移入，做函数内动作
        tag_obj.onmouseout = function () {this.style.backgroundColor = '';} //当鼠标移出，做函数内动作
    【记住】this关键字：谁调用这个this所在函数，this就指向谁(对象)
        
        绑定方式1:【在原有标签内部绑定js函数】
        
            <div id="i2" class="menu" onclick="active_this(this)">菜单1</div>
                function active_this(self) {
                    self.onclick = function () { self.XXXX动作 } 
                }
        绑定方式2:【获取标签做操作 标签再.事件=js函数通过this关键字指定标签本身】
        
            <div id='XX'></div> 
            <script>
                tag = document.getElementById('XX')
                tag.onmouseover = function () { this.XXXXXX; }
            </script>
    添加标签：
        插入html标签：insertAdjacentHTML('beforeEnd',tag)
        插入文本：insertAdjacentText('beforeEnd',tag)
        插入的位置
        'beforeBegin'(标签同级上面) 
        'afterEnd'    (标签同级下面)
        'afterBegin'(标签内部开头), 
        'beforeEnd'(标签内部末尾), 

    方式一：
        添加字符串形式：insertAdjacentHTML
        var tag = '<p><input id="i1" type="text"></p>';
        document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
        
    方式二：
        createElement创建标签，然后appendChild添加。
        var tag = document.createElement('input');
            tag.setAttribute('type','text');
            
            var p_tag = document.createElement('p');
            p_tag.appendChild(tag); //在标签中添加新的标签
            
            document.getElementById('i1').appendChild(p_tag);
            
            
提交表单：
    任何标签通过DOM都可提交表单。
    方法：
        借助js
    示例：
        <form id="f1" action="http://oldboyedu.com">
            <input type="text" placeholder="username" name="user">
            <input type="submit" value="一般用<input type='submit' >按钮提交">
            <p>
               <a onclick="submitForm()">其他标签标签使用 onclick 事件调用js+dom标签的.submit()方法也可提交</a>
            </p>
        </form>
        <script>
            function submitForm() {
                document.getElementById('f1').submit() //标签的submit方法
            }
        </script>