javascript ---- DOM1

1. DOM

1. 什么是window?
    window：是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象

2. 什么是document?
    document是window的一个属性, 这个属性是一个对象
    document: 代表当前窗口中的整个网页,
    document对象保存了网页上所有的内容, 通过document对象就可以操作网页上的内容

3. 什么是DOM?
    DOM 定义了访问和操作 HTML文档(网页)的标准方法
    DOM全称: Document Object Model, 即文档模型对象
    所以学习DOM就是学习如何通过document对象操作网页上的内容

    console.log(window.document);
    console.log(typeof window.document);
    console.log(window.document.title);
    

2. 获取DOM元素

1. 通过id获取指定元素
    //由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回Null
    注意点: DOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)

    let oDiv = document.getElementById("box");
    console.log(oDiv);
    console.log(typeof oDiv);

2. 通过class名称获取
    //由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
    let oDivs = document.getElementsByClassName("father");
    console.log(oDivs);

3. 通过name名称获取
    //由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
    注意点: getElementsByName  在不同的浏览器其中工作方式不同。
            在IE和Opera中， getElementsByName()  方法还会返回那些 id 为指定值的元素。
            
    let oDivs = document.getElementsByName("test");
    console.log(oDivs);

4. 通过标签名称获取
    //由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
    let oDivs =  document.getElementsByTagName("div");
    console.log(oDivs);

5. 通过选择器获取
    //querySelector只会返回根据指定选择器找到的第一个元素
    let oDiv = document.querySelector("#box");
    let oDiv = document.querySelector(".father");
    let oDiv = document.querySelector("div>form");
    console.log(oDiv);

6. 通过选择器获取
    //querySelectorAll会返回指定选择器找到的所有元素
    let oDivs = document.querySelectorAll(".father");
    console.log(oDivs);
    
7. 获取DOM指定元素所有的子元素
    let oDivs = document.querySelector('div')
    
    //children属性获取到的是指定元素中所有的子元素
    console.log(div.children)
    
    //childNodes属性获取到的是指定元素中所有的节点
    console.log(div.childNodes)

    for(let node of oDiv.childNodes){
        // console.log(node.nodeType) 文本节点===3
        // if(node.nodeType === 1){
        if(node.nodeType === Node.ELEMENT_NODE){ //专业写法,相当于 node.nodeType === 1
            console.log(node);
        }
    }

    
8. 什么是节点?
    DOM对象(document), 这个对象以树的形式保存了界面上所有的内容
    HTML页面每一部分都是由节点(标签(元素),文本,属性)
    

    <div>
        <h1>1</h1>
        <h2>2</h2>
        <p class="item">3</p>
        <p>4</p>
        <span>5</span>
    </div>
     
9. 
    获取指定节点中的第一个子节点      
    let oDivs = document.querySelector('div')
    console.log(oDivs.firstChild);
    
    获取指定元素中的第一个子元素
    let oDivs = document.querySelector('div')
    console.log(oDivs.firstElementChild)
   
10. 注意区别节点和元素：节点是text(空格)
    //获取指定节点中最后一个子节点
    let oDivs = document.querySelector('div')
    console.log(oDiv.lastChild);
    
    //获取指定元素中最后一个子元素
    let oDivs = document.querySelector('div')
    console.log(oDiv.lastElementChild);

11. 通过子元素获取父元素/父节点
    let item = document.querySelector(".item");
    
    //console.log(item.parentElement);
    //console.log(item.parentNode);
    
    let parentEle = item.parentElement || item.parentNode; //兼容火狐浏览器的处理方式
    console.log(parentEle);

12.   
    //获取相邻上一个节点
    let item = document.querySelector(".item");
    console.log(item.previousSibling);
    
    //获取相邻上一个元素
    let item = document.querySelector(".item");
    console.log(item.previousElementSibling);

    //获取相邻下一个节点
     let item = document.querySelector(".item");
    console.log(item.nextSibling);
    
    //获取相邻下一个元素
     let item = document.querySelector(".item");
    console.log(item.nextElementSibling);

3. 节点增删改查

<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>

1. 创建节点
    let oSpan = document.createElement("span");
    console.log(oSpan);
    console.log(typeof oSpan); //object

2. 添加节点
    //注意点: appendChild方法会将指定的元素添加到最后
    let oDiv = document.querySelector("div");
    let oA = document.createElement("a");
    oDiv.appendChild(oA);
    console.log(oDiv.children)

3. 删除节点
    //注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除,元素是不能够自杀的
    let oDiv = document.querySelector("div");
    oDiv.parentNode.removeChild(oDiv);

4. 插入节点
    //在h1节点前面插入一个span节点
    let oSpan = document.createElement("span");
    let oDiv = document.querySelector("div");
    let oH1 = document.querySelector("h1");
    //将span元素添加到div中,并且添加到div中和h1元素的前面
    oDiv.insertBefore(oSpan, oH1);
    console.log(oDiv)
    
    //在p节点前面插入一个span节点
    let oSpan = document.createElement("span");
    let oDiv = document.querySelector("div");
    let oP = document.querySelector("p");
    oDiv.insertBefore(oSpan, oP);
    console.log(oDiv)

5. 克隆节点
    // 注意点: cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true
    let oDiv = document.querySelector("div");
    //let newDiv =  oDiv.cloneNode(); 不写true,只克隆div,不克隆子元素。
    let newDiv =  oDiv.cloneNode(true); 
    console.log(newDiv);
    console.log(oDiv)

4. 属性增删改查

1. 获取元素属性
    let inp = document.querySelector('input')
    // 注意点: 通过对象.属性名称的方式无法获取到自定义属性的取值
    //        通过getAttribute方法可以获取到自定义属性的取值
    console.log(inp.nj)  //undefined
    console.log(inp.getAttribute('nj'))  //1
    
2. 修改元素属性
    let inp = document.querySelector('input')
    // 注意点: 通过对象.属性名称的方式无法修改自定义属性的取值
    //        通过setAttribute方法可以修改自定义属性的取值
    inp.placeholder = '123'
    inp.setAttribute('placeholder','456')

3. 新增元素属性
    let inp = document.querySelector('input')
    // 注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改
    inp.value = 123  //这种方式是不能新增元素属性
    inp.setAttribute('value','123')

4. 删除元素属性
    let inp = document.querySelector('input')
    inp.placeholder = ''       //元素属性为空值,本质上没有删除 placeholder = ''
    inp.removeAttribute('nj')  //删除元素属性

5. 操作元素内容

    <div>
        我是div
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>

1.获取元素内容
  区别：
    1.innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
    2.innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格

    let oDiv = document.querySelector('div')
    console.log(oDiv.innerHTML)
    console.log(oDiv.innerText)
    console.log(oDiv.textContent)

2.设置元素内容
特点:
    1. 无论通过innerHTML/innerText/textContent设置内容, 新的内容都会覆盖原有的内容

区别:
    1. 如果通过innerHTML设置数据, 数据中包含标签, 会转换成标签之后再添加
    2. 如果通过innerText/textContent设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置

    let oDiv = document.querySelector('div')
 
    oDiv.innerHTML = '123'
    oDiv.innerText = '456'
    oDiv.textContent = '789'

    oDiv.innerHTML = `<span>我是span</span>`
    oDiv.innerText = `<span>我是span</span>`
    oDiv.textContent = `<span>我是span</span>`

    //企业开发通常innerText结合textContent一起使用,解决兼容性问题
    function setText(obj,text){
        if("textContent" in obj){
            obj.textContent = text;
        }else{
            obj.innerText = text;
        }
    }

    setText(oDiv,'liu')

6. 操作元素样式

    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }

    <div></div>

1. 设置元素样式
    let oDiv = document.querySelector('div')
    //第一种方式
    //注意点: 由于class在JS中是一个关键字, 所以叫做className
    oDiv.className = 'box'
    
    //第二种方式
    //注意点: 过去CSS中通过-连接的样式, 在JS中都是驼峰命名
    //注意点: 通过JS添加的样式都是行内样式, 会覆盖掉同名的CSS样式(行内样式优先级高)
    oDiv.style.width = '300px'
    oDiv.style.height = '300px'
    oDiv.style.backgroundColor = 'blue'
    
2. 获取元素样式
    let oDiv = document.querySelector('div')
    //注意点: 通过style属性只能获取到行内样式的属性值, 获取不到CSS设置的属性值
    oDiv.style.width = "300px";  //行内样式
    console.log(oDiv.style.width)  //300px

    // 注意点: 如果想获取到CSS设置的属性值, 必须通过getComputedStyle方法来获取
    // getComputedStyle方法接收一个参数, 这个参数就是要获取的元素对象
    // getComputedStyle方法返回一个对象, 这个对象中就保存了CSS设置的样式和属性值
    let style = window.getComputedStyle(oDiv)
    console.log(style)
    console.log(style.width)

7. DOM事件

DOM事件官网：www.runoob.com/jsref/dom-o…

1. 什么是事件?
    用户和浏览器之间的交互行为我们就称之为事件, 比如：点击，移入/移出


2. 如何给元素绑定事件?
    在JavaScript中所有的HTML标签都可以添加事件
    元素.事件名称 = function(){};
    当对应事件被触发时候就会自动执行function中的代码
    

    // 注意点: 如果给元素添加了和系统同名的事件, 我们添加的事件不会覆盖系统添加的事件

    <a href="http://www.baidu.com">我是a标签</a>
    
    let oA = document.querySelector("a");
    oA.onclick = function () {
        alert("a标签被点击了");
    }

    let oA = document.querySelector("a");
    oA.onclick = function () {
        alert("a标签被点击了");
        // 以下代码的含义: 用我们添加的事件覆盖掉系统同名的事件
        return false;
    }

8. 定时器

在JavaScript中有两种定时器, 一种是重复执行的定时器, 一种是只执行一次的定时器

1. 重复执行的定时器
    <button id="start">开始</button>
    <button id="close">结束</button>
    
    /*
        setInterval(function () {
           console.log("随便写点");
        }, 1000);
    */ 
    
    let startBtn = document.querySelector("#start");
    let closeBtn = document.querySelector("#close");
    
    let id = null;
    
    //开启定时器
    startBtn.onclick = function () {
        //创建定时器时有一个返回值,它会把定时器的唯一标识返回(注意写法)
        id = setInterval(function () {
            console.log("随便写点");
        }, 1000);
    }
    
    //关闭定时器
    let closeBtn = document.querySelector("#close");
    closeBtn.onclick = function () {
        //清除定时器方法
        clearInterval(id);
    }

2.只执行一次的定时器
    <button id="start">开始</button>
    <button id="close">结束</button>
    
    /*
        window.setTimeout(function () {
             console.log("随便写点");
        }, 5000);
    */
    
    let startBtn = document.querySelector("#start");
    let closeBtn = document.querySelector("#close");
    
    let id = null;
    
    //开启定时器
    startBtn.onclick = function () {
        id = window.setTimeout(function () {
            console.log("随便写点");
        }, 5000);
    }
    
    //关闭定时器
    closeBtn.onclick = function () {
        //清除定时器方法
        clearTimeout(id);
    }