day07

今天学了什么

1.DOM基础

1.1什么是DOM

“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。”

HTML Dom是关于如何增,删,改,查 HTML 元素的标准。
DOM的支持性:凡是好用的IE9以下都不支持
DOM:document object model
HTML DOM 将 HTML 文档视作树结构。

这种结构被称为节点树：

节点树.png

1.2节点

节点树就是由一个个节点组成
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

节点.png

1.3如何获取节点

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()

实现：
点击button按钮,如果div是显示的则隐藏,如果隐藏则显示

//css
 <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
//html
    <div id="div">
    </div>
    <button id="btn" style="display: block">change</button>
    <script>
        var btn=document.getElementById("btn");
        var div=document.getElementById("div");
        btn.onclick=function(){
           let value=div.style.display;
           if(value=="block"){
            div.style.display="none";
           }else{
            div.style.display="block";
           }
        }    
    </script>

1.4.1修改元素节点的内容

属性用于设置或返回指定标签之间的 HTML 内容。
语法:
innerHTML

修改样式:
element.style.attr=value;

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        var lis=document.getElementsByTagName("li");
        for(let i=0;i<lis.length;i++){
            if(i%2 == 0){
                lis[i].style.backgroundColor="pink";
            }else{
                lis[i].style.backgroundColor="#ADD8E6";
            }
        }
    </script>

eg:li隔行变色

隔行变色.png

1.4.2className属性

//css
  <style>
       .current{
           color: red;
       }
    </style>
//html
   <p>hello world</p>
   <p>hello world</p>
   <p>hello world</p>
   <p>hello world</p>
   <p>hello world</p>
    <script>
     var btn=document.getElementById("btn");
     var p=document.getElementsByTagName("p")[0];
     p.className="current";
    </script>

eg:实现以下效果

classname.png

1.4.3node.textContent

textContent属性返回当前节点和它的所有后代节点的文本内容。
Node.nodeValue
只有文本节点（text）和注释节点（comment）有文本值，因此这两类节点的nodeValue可以返回结果，其他类型的节点一律返回null

nodevalue.png

1.5节点的分类nodeType

a.nodeType==1 为元素节点
b.nodeType==2 为属性节点
c.nodeType==3 位文本节点

   <p class="current" id="test">hello world</p> 
    <script>
        var eNode = document.getElementById("test");
        var aNode = eNode.getAttributeNode("class");
        var tNode = eNode.firstChild;
        alert(tNode.nodeType)
    </script>

1.6增加获取节点

A.appendChild(node)
将新元素作为父元素的最后一个子元素进行添加。

<script>
createElement() ; //创建元素节点
createTextNode(); //创建文本节点
var p=document.createElement("p");
var txt = document.createTextNode("hello world");
var attr = document.createAttribute("class");    //创建属性节点
attr.value = "democlass";  
p.setAttributeNode(attr)
p.appendChild(txt);
document.body.appendChild(p); 
</script>

B.parentNode.insertBefore(newNode,targetElementNode)

1.7删除节点

语法

parentNode.removeChild(childNode)

1.8修改节点(替换节点)

语法

parentNode.replaceChild(newNode,oldNode);

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

1.9克隆节点

2.DOM事件(event)

2.1JavaScript与HTML之间的交互式通过事件实现的

有事件一定有对应一个处理结果，用函数表示

2.1.1onclick//点击

上文有例子

2.1.2onfocus //获取焦点
onblur //失去焦点

<input type="text" id="input">
<script>
      var input=document.getElementById("input");
       input.onfocus=function(){
           this.style.background="red";
       }
       input.onblur=function(){
           this.style.background="green";
       }
    </script>

2.1.3onmouseover //鼠标移到某元素之上
onmouseout //鼠标从某元素移开

  <p id="p">hello world</p>
    <script>
       var p=document.getElementById("p");
       p.onmouseover=function(){
           this.style.background="red";
       }
       p.onmouseout=function(){
           this.style.background="green";
       }
    </script>

2.1.4onload页面加载时触发

//head
 <script>
  window.onload=function(){
   var p=document.getElementsByTagName("p")[0];
   console.log(p);
  }
 </script>
//body
 <p>hello world</p>

2.1.5onchange域的内容改变时发生

onchange事件支持的标签input,select,textarea

 <input type="text">
  <script>
    var input=document.getElementsByTagName("input")[0];
    input.onchange=function(){
      this.value="change";
    }
  </script>

2.1.6. onsubmit

表单中的确认按钮被点击时发生

 <form action="">
    <input type="text">
    <button type="submit">提交</button>
  </form>
  <script>
    var form=document.getElementsByTagName("form")[0];
    form.onsubmit=function(){
     alert("提交表单");
    }
  </script>

2.1.7. onresize//浏览器的尺寸发生改变
onscroll //窗口滚动

//css
<style>
      div{
        width: 500px;
        height: 500px;
        background: red;
      }
    </style>
//html
 <div>
 </div>
  <script>
    window.onresize=function(){
      alert("浏览器窗口改变时，触发");
    }
    window.onscroll=function(){
      alert("窗口滚动时，触发");
    }
  </script>

2.2键盘事件与KeyCode属性

keyCode:返回onkeypress，onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码

2.2.1 onkeydown
用户按下一个键盘按键时发生

 <script>
  document.onkeydown=function(event){
     window. alert(event.keyCode);
  }
  </script>

2.2.2onkeypress

在键盘按键按下并释放一个键时发生

 <script>
  document.onkeypress=function(event){
     window. alert(event.keyCode);
  }
  </script>

2.2.2. onkeyup

在键盘按键松开时发生

  <script>
  document.onkeyup=function(event){
    window.alert(event.keyCode);
  }
  </script>

3.BOM

BOM(browser object model)浏览器对象模型
BOM对象有:

bom.png

3.1window

3.1

window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象(全局对象)。

3.2

所有的全局变量和全局方法都被归在window上
js的顶级作用域就是window
全局变量时window的属性
方法是window的方法

  <script>
        var a=10;
        console.log(window.a);
        /*this指向*/
        function b(){
            console.log(this);
        }
        window.b();
        </script>

3.3window对象的方法

3.3.1语法:window.alert()

上文有例子

3.3.2语法:window.confirm(“msg”)

功能:显示一个带有指定消息和OK及取消按钮的对话框

   <div>
        <span id="mi">小米8</span>
        <button id="btn">btn</button>
    </div>
    <script>
        let btn=document.getElementById("btn");
        let mi=document.getElementById("mi");
        btn.onclick=function(){
            var result=window.confirm("你确定不要小米8吗");
            if(result){
                mi.style.display="none";
            }else{
                mi.style.display="block";
            }
        }
    </script>

3.3.3语法:window.prompt(“text,defaultText”)

参数说明:
text:在对话框中显示的文本
defaultText:默认输入文本
返回值:点取消按钮,返回null
点确定按钮,返回输入的文本

var result=window.prompt("请输入你的星座","狮子座");
console.log(result);

3.3.4语法:window.open(pageURL,name,parameters)

功能:打开一个新的窗口或查找一个已命名的窗口
参数说明:
pageURL:子窗口的路基
name:子窗口的句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
parameters：窗口参数(各参数之间用逗号分隔)

window.png

3.3.5window.close()

功能:关闭窗口