day75-JS对HTML的增删改查和DOM

1. window的子对象 
    1.1 location对象
    location.href  //获取URL
    location.href="URL" // 跳转到指定页面location.href="http://www.baidu.com"
    location.reload() //重新加载页面，刷新

    1.2 弹出框 
        警告框 alert("你看到了吗？");

    1.3 计时相关
        1.3.1 setTimeout 和 clearTimeout
        // 在指定时间（3000毫秒）之后执行一次相应函数
            var timer = setTimeout(function(){console.log('hehe')}, 3000)
        // 取消setTimeout设置
            clearTimeout(timer);

        function foo(){console.log('hehe')};
        var timer = setTimeout(foo,3000);    //这里不能写foo()，否则没等到3秒就马上开始执行函数。

        1.3.2 setInterval 和 clearInterval
        // 每隔一段时间就执行一次相应函数
            var timer = setInterval(function(){console.log('hehe')}, 3000)
        // 取消setInterval设置
            clearInterval(timer);

2. DOM
    BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
    DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

    DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。 
    当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model）。
    
    DOM标准规定HTML文档中的每个成分都是一个节点(node)：
    文档节点(document对象)：代表整个文档
    元素节点(element 对象)：代表一个元素（标签）
    文本节点(text对象)：代表元素（标签）中的文本
    属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
    注释是注释节点(comment对象)　

    JavaScript 可以通过DOM创建动态的 HTML：
    JavaScript 能够改变页面中的所有 HTML 元素和属性、 CSS 样式，和对页面中的所有事件做出反应。


3. JS对HTML元素的增删改查
    3.1.1 查找标签
        document.getElementById('d1');  //根据ID获取一个标签，d1是ID名
        document.getElementsByClassName('c1');  //根据class名获取一个标签
        document.getElementsByTagName('div');  //根据标签名获取标签合集

        var d1Ele = document.getElementById('d1'); //根据ID获取一个标签放在变量d1Ele里面
        d1Ele;        //<input id="d1" type="text">

    3.1.2 间接查找：测试过只有id才可以使用下面的方法，class是不可以的，未找到原因。
        parentElement            父节点标签元素
        children                 所有子标签
        firstElementChild        第一个子标签元素
        lastElementChild         最后一个子标签元素
        nextElementSibling       下一个兄弟标签元素
        previousElementSibling   上一个兄弟标签元素
        
        示例：
        <div id="i1">
                    <div id="i2">我是i1里面的i2</div>
            </div>
        
        var i2Ele = document.getElementById('i2');
        i2Ele.parentElement;

    3.2 增：增加节点(node)
        创建标签：createElement
        追加标签：appendChild
        插入标签：insertBefore        

        3.1.1 创建标签createElement，追加标签appendChild
        var id1Ele = document.getElementById('id1');
    
        var imgEle = document.createElement('img');    //创建节点，创建img标签

        id1Ele.appendChild(imgEle);            //追加一个子节点（作为最后的子节点），id为id1的标签嵌套img标签

        imgEle.src = 'https://timgsa.baidu.com/timg?';    //添加图片地址
        
        3.1.2 在id3前面插入a标签。插入标签insertBefore、添加内容innerText
        <div id="id2">
                    dfaf
                    <div id="id3">aaa</div>
            </div>

        var id2Ele = document.getElementById('id2');    //找到id2标签
        var id3Ele = document.getElementById('id3');    //找到id3标签
        var aEle = document.createElement('a');        //创建a标签
        id2Ele.insertBefore(aEle,id3Ele);    //在id3前面插入a标签
        aEle.innerText = '点我跳到sogo';        //a标签添加内容
        aEle.href = 'http://www.sogo.com';    //a标签添加要跳转的网址

    3.3 删：删除节点，父元素删除子元素。removeChild
        <div id="i1">
                    i1
                    <div id="i2">i2</div>
            </div>

        var i1Ele = document.getElementById('i1');    //找到标签i1
        var i2Ele = document.getElementById('i2');    //找到标签i2
        i1Ele.removeChild(i2Ele);            //i1删除i2

    3.4 改：
        3.4.1 替换节点：父元素把子元素替换成新元素
            语法：
            somenode.replaceChild(newnode, 某个节点);

            <div id="i1">
                        i1
                        <div id="i2">i2</div>
                </div>

            var i1Ele = document.getElementById('i1');    //找到标签i1
            var i2Ele = document.getElementById('i2');    //找到标签i2
            var aEle = document.createElement('a');        //创建a标签
            i1Ele.replaceChild(aEle,i2Ele);            //替换

        3.4.2 修改节点的值 innerText 和 innerHTML

            示例1：innerText
            <div id="i1">
                        i1
                        <div id="i2">i2</div>
                </div>

            var i1Ele = document.getElementById('i1');    //找到i1标签
            i1Ele.innerText;                //获取i1标签的值，是text文本
            i1Ele.innerText = 'i1i1';            //修改值，结果是<div id="i1">i1i1</div>

            示例2：innerHTML可以快速增加和修改标签。
            <div id="i1">
                        i1
                        <div id="i2">i2</div>
                </div>

            var i1Ele = document.getElementById('i1');    //找到i1标签
            i1Ele.innerHTML；                //获取i1标签的值，是标签"<a href="">我是a标签</a>"
            i1Ele.innerHTML = '<a href="">我是a标签</a>';    //修改值

    3.5 Attribute属性操作：
        3.5.1 自定义属性或自带属性：
            自定义属性：age为自定义属性
            var divEle = document.getElementById("d1");
            divEle.setAttribute("age","18")
            divEle.getAttribute("age")
            divEle.removeAttribute("age")
            自带属性：
            imgEle.setAttribute("src","http://........")

        3.5.2 自带属性：自带属性还可以直接通过  .属性名 来获取和设置
            imgEle.src
            imgEle.src="..."
    
    3.6 获取值操作：适用于input  select  textarea
        语法：
        elementNode.value
        
        <input type="text" id="d1" value="迈腾2020">

        <script>
            var d1Ele = document.getElementById("d1");    //找到d1标签
            d1Ele;    //<input type="text" id="d1" value="迈腾2020">
            d1Ele.value;    //"迈腾2020"
            d1Ele.value = '';    //把value默认值修改为空字符串，也就是清空内容，去掉默认值。
            d1Ele.value;    //""    
        </script>

    3.7 class的操作(不是重要的内容)
        className 获取类名
        classList.remove(cls)  删除指定类名
        classList.add(cls)  添加类名
        classList.contains(cls)  存在返回true，否则返回false
        classList.toggle(cls)  存在就删除，否则添加

        示例：
            <div class="c1 c2 c3">div</div>

            var divEles = document.getElementsByTagName('div');
            divEles;        //HTMLCollection [ div.c1.c2.c3 ]，数组
            divEles[0];        //<div class="c1 c2 c3">  数组使用索引来取值，得到标签才可以进行class的操作
            divEles[0].className;    //"c1 c2 c3"   获取类名
            divEles[0].classList;        //DOMTokenList(3) [ "c1", "c2", "c3" ]
            divEles[0].classList.remove('c3');    //删除指定类名
            divEles[0].className;        //"c1 c2"
            divEles[0].classList.add('cc');        //添加类名
            divEles[0].className;        //"c1 c2 cc"
            divEles[0].classList.contains('cc');    //true  存在类名cc所以返回true，否则返回false

        3.7.2 指定CSS操作
            obj.style.backgroundColor="red"

            JS操作CSS属性的规律：
            1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
            obj.style.margin
            obj.style.width
            obj.style.left
            obj.style.position
            2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
            obj.style.marginTop
            obj.style.borderLeftWidth
            obj.style.zIndex
            obj.style.fontFamily

4. document.getElementById('d1')、document.getElementsByClassName('c1')、document.getElementsByTagName('p')的区别：

    <div id="d1">d1d1</div>
        <div class="c1">c1c1</div>
        <p>pp</p>

    <script>
                var d1Ele = document.getElementById('d1');
                d1Ele;        //<div id="d1">        返回标签

                var c1Ele = document.getElementsByClassName('c1');
                c1Ele;        //HTMLCollection [ div.c1 ]    返回数组
                c1Ele[0];        //<div class="c1">        　　返回标签

                var pEle = document.getElementsByTagName('p');
                pEle;        //HTMLCollection [ p ]    　　　　返回数组
        　　　　　pEle[0];        //<p>            　　　　　　　　返回标签

     </script>