前端day01-要点

01-获取节点

通过标签名获取 伪数组

var domArr= document.getElementsByTagName("h1")

document.getElementsByTagName获取包含h1的内容并合并为数组

var domArr = document.getElementsByClassName("a")

document.getElementsByClassName获取包含类class"a"的内容并合并为数组

var idDom=document.getElementById("b")

document.getElementById获取id为"b"的内容，所有内容显示在控制台，不会合并为数组

重点内容为css选择器

document.querySelector("*")//只返回第一个
document.querySelectorAll("body h2")所有h2

02-点击弹窗

一、body中要有可操作的内容(点击按钮button)

二、事件源--script中首先要var 一个自己命名的名称 并对要操作的内容进行选择（单个为querySelector）多个为querySelectorAll

var btn = document.querySelector("button")

三、绑定事件 -- 事件驱动程序

btn.onclick = function(){
}

03-多个备选

一、body中有多个需要操作项

    按钮
    按钮

二、script中先进行var选择

var btn =document.querySelectorAll("button")[0];

[0]为button中的第一个

三、事件驱动程序

04-onclick中的this选择

btn.onclick = function(){
            this.style.color = "red"
            this.className = "b c"
        }

this指向onclick.前面的内容(btn)

附上style中的color与类名(b、c)

05-阻止默认行为（点击跳转）

方法一：a标签中设置href="javascript:;

百度

方法二：.onclick = function(){}中设置

return false;

06-遍历点击事件

    百度1
    百度2
    百度3

有多个a标签

首先：获取所有a标签 返回的是伪数组

var domS = document.querySelectorAll("a")

其次：使用for循环遍历所有a

for (var  i = 0; i < domS.length;i++){
            domS[i].onclick = function (){
                alert("你好");
                console.log(this);//this指向domS[i]
            }
        }

07-属性设置

一、首先body中所有需要操作的内容

在script中都需要用var 声明出来

二、在点击功能onclick中

全都用var声明的名称来进行功能和属性的设置

08-属性操作

        btn.onclick = function(){
            // 属性名，属性值setAttribute添加的属性会出现在行内
            a.setAttribute("class","abc ab");
            a.setAttribute("style","abc");
        }

运行结果：

var str = a.getAttribute("class");//拿出属性值

运行结果：

09-获取标签内文本

一、body中添加了div以及文本内容

二、script首先var声明

var div = document.querySelector("div");

其次再附功能-事件内容

        div.onclick=function name (params){
            var text = div.innerText;//获取div中的文本
            var text1 = div.innerHTML;//获取div中的所有HTML
            console.log(text,text1);
        }

10-点击切换图片-不跳转

（一）首先：要有一个img的显示位置(主框)用（目的是把href的内容传入到src中接收--显示）

（二）其次：有点击跳转的链接

        图片1
        图片2
        图片3

（三）script中------需要操作的有img 与a标签，故都需要var声明表示

        var imgDom = document.querySelector("img");
        var aArr = document.querySelectorAll("a");

（四）在onclick中 img就用imgDom代替；a标签就用aArr数组代替

        for( var i = 0 ;i

遍历思路：

（1）首先a标签被封装成数组aArr[]---for遍历3个a标签

（2）其次附加事件功能onclick

aArr[i].onclick = function(){}

（3）功能中首先要提取出href中的内容，用var声明的名称保存

var srcStr = this.href;

（4）把提取出的内容赋给img的src中（目标显示处）

imgDom.src = srcStr;

11-鼠标的移入移出

一、body中div一个鼠标可以操作的区域

二、script中var一个操作div的目标,其次定义功能

        div.onmouseenter = function(){
            console.log("onmouseenter",'移入div');
        }
        div.onmouseleave = function(){
            console.log("onmouseleave",'移出div');
        }

12-禁用

一、首先body中button一个按钮开关，然后input一个输入框

    切换
    

二、script中var对button和input进行声明

var btn = document.querySelector("button");
var input = document.querySelector("input");

三、添加点击事件功能

        btn.onclick = function(){
            console.log(input.disabled);
            input.disabled=!input.disabled;
        }

13-删除属性

btn.onclick = function(){
            this.removeAttribute("title");
        }

删除了title属性

14-伪数组标记索引

 for(var i=0;i