BOM和DOM

BOM对象

//location对象
    location.href  //获取URL
    location.href="URL" // 跳转到指定页面
    location.reload() //重新加载页面,就是刷新一下页面
//定时器
    1. setTimeOut()  //一段时间之后执行某个内容,执行一次
  //      示例 
            var a = setTimeout(function f1(){confirm("are you ok?");},3000);
            var a = setTimeout("confirm('xxxx')",3000);//  单位毫秒
    //    清除计时器
            clearTimeout(a);  
    2.setInterval() // 每隔一段时间执行一次,重复执行 
        var b = setInterval('confirm("xxxx")',3000);//单位毫秒
 //       清除计时器
            clearInterval(b);

DOM对象

查找标签

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     根据标签名获取标签合集

示例:
    
    
    
        
        
    
    
        

            are you ok?

        
        

            div2
        
    
    
操作:
    var divEle = document.getElementById('d1');
    var divEle = document.getElementsByClassName('c1');
    var divEle = document.getElementsByTagName('div');

标签操作

创建标签:重点
    var aEle = document.createElement('a');

添加标签
    追加一个子节点（作为最后的子节点）
    somenode.appendChild(newnode)；
    示例:
        var divEle = document.getElementById('d1')
        divEle.appendChild(aEle)
    
    
    把增加的节点放到某个节点的前边。
    somenode.insertBefore(newnode,某个节点);
    示例:
        var divEle = document.getElementById('d1'); 找到父级标签div
        var a = document.createElement('a');  创建a标签
        a.innerText = 'baidu';  添加文本内容
        var span2 = document.getElementById('s2'); 找到div的子标签span2
        divEle.insertBefore(a,span2); 将a添加到span2的前面
        
html文件代码:
    
    
    
        
        
    
    

    

        are you ok?

        span1
        span2
        span3
    

    

        div2
    

    
    
        

删除节点

获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
示例: 删除span2标签
    var divEle = document.getElementById('d1');
    var span2 = document.getElementById('s2');
    divEle.removeChild(span2);

替换节点：

somenode.replaceChild(newnode, 某个节点);
somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉

文本节点操作

var divEle = document.getElementById("d1")
divEle.innerText  #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML  #获取的是该标签内的所有内容，包括文本和标签
取值示例:
    div2.innerText;  不识别标签
        "are you ok? span1 span2 span3"
    div2.innerHTML;  识别标签
        "
            are you ok?

            span1
            span2
            span3
        "
设置值:
    var div1 = document.getElementById('d1');
    div1.innerText = 'xxx';
    div1.innerText = '百度';
    div1.innerHTML = '百度';

属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."

示例:
    百度
    操作
        var a = document.getElementsByTagName('a');
        a[0].href;  获取值
        a[0].href = 'xxx'; 设置值

获取值操作

输入框 input
    获取值
        var inpEle = document.getElementById('username');
        inpEle.value;  
    设置值
        inpEle.value = 'alexDsb';

select选择框
    获取值
        var selEle = document.getElementById('select1');
        selEle.value;
     设置值
        selEle.value = '1';
        

类操作

className  获取所有样式类名(字符串)

首先获取标签对象
标签对象.classList; 标签对象所有的class类值

标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个


示例:
    var divEle = document.getElementById('d1');
    divEle.classList.toggle('cc2');  
    var a = setInterval("divEle.classList.toggle('cc2');",30);

    判断有没有这个类值的方法
        var divEle = document.getElementById('d1'); 
        divEle.classList.contains('cc1');

css设置

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

设置值:
    divEle.style.backgroundColor = 'yellow';
获取值
    divEle.style.backgroundColor;

事件

简单示例:
    
    
        
        

        
    
    

    


    


    
    
    

绑定事件的方式

方式1:
    
    
        下面的this表示当前点击的标签
        var divEle = document.getElementById('d1');
        divEle.onclick = function () {
            this.style.backgroundColor = 'purple';
        }
    
方式2
    标签属性写事件名称=某个函数();
    

    
    
    
    
    获取当前操作标签示例,this标签当前点击的标签
        

        function f1(ths) {
            ths.style.backgroundColor = 'purple';
        }
    

转载于:https://www.cnblogs.com/zhaohaiyu/p/11534029.html