每日一问

弹出框

　　　　可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

　　警告框

　　　　警告框经常用于确保用户可以得到某些信息。

　　　　当警告框出现后，用户需要点击确定按钮才能继续进行操作。

　　　　语法：

alert("你看到了吗？");

　　　　

　　确认框（了解即可）

　　　　确认框用于使用户可以验证或者接受某些信息。

　　　　当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

　　　　如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

　　　　语法：

confirm("你确定吗？")

　　　　

　　　　　　　　　　

　　　　我们可以根据返回的true和false来判断一下，然后根据这个值来使用location去跳转对应的网站。

　　提示框（了解即可）

　　　　提示框经常用于提示用户在进入页面前输入某个值。

　　　　当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

　　　　如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null。

　　　　语法：

prompt("请在下方输入","你的答案")

　　　　

　　　　可以通过用户输入的内容来判断我们怎么去进行后面的操作

　　除了那个警告框（用的也不都），其他的都很少用，比较丑陋，了解一下就行

BOM 浏览器对象模型

window对象的子对象中的location

location.href   获取当前url:"https://www.cnblogs.com/clschao/articles/10092991.html"
location.href="URL" // 跳转到指定页面
    示例:location.href = 'http://www.baidu.com';直接跳转到百度
location.reload() 重新加载页面,就是刷新一下页面

计时器相关(计时器是异步的)

setTimeout 计时器,一段时间之后做某些事情

做一次

setTimeout('confirm("你好");',3000);  #3秒之后执行前面的js代码
setTimeout(confirm('xxx'),3000);  #如果写的不是字符串,会直接执行
setTimeout(function(){confirm('xxx')},3000);  #最好写成函数

var a = setTimeout(function(){console.log('xxx')},3000);  #a是浏览器来记录计时器的一个随机数字 a就是id好
clearTimeout(a)  #清除计时器,通过这个数字可以清除 清除后就不打印了

setInterval 计时器,每隔一段时间做某些事情

重复做

var a = setInterval(function(){console.log('xxx')},3000);  
clearInterval(a);

DOM树

　HTML DOM 树

　　　　

选择器　

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)　

　　JavaScript 可以通过DOM创建动态的 HTML：

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）

　　查找标签（和css一样，你想操作某个标签需要先找到它）

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     根据标签名获取标签合集
示例:
    <div class="c1" id="d1">
        待到将军归来日,朕与将军解战袍!
    </div>

    <div class="c1" id="d2">
        日照香炉生紫烟,遥看瀑布挂前川!
    </div>
    
    var a = document.getElementById('d1');  # 获取id属性值为d1的标签  拿到的直接是标签对象
    var a = document.getElementsByClassName('c1'); #获取class值为c1的所有标签  拿到的是数组
    var a = document.getElementsByTagName('div');  #获取所有div标签  拿到的是数组
    
    

间接查找

# 获取id属性值为d1的标签  拿到的直接是标签对象
var a = document.getElementById('d1');
a.parentElement; #获取a这个标签的父级标签.
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

创建节点(创建标签) 
    var a = document.createElement('标签名称'); 
    示例,创建a标签
        var a = document.createElement('a');
    var dd = document.getElementById('dd'); 找到div标签
    
#添加节点（找到父标签 在添加）
    #添加节点,添加到了最后
    dd.appendChild(a);将创建的a标签添加到dd这个div标签里面的最后.

    #在某个节点前面添加节点(第1步#找到父级标签，创建一个新的a标签 找到父级标签下的某个儿子标签 将a标签插入到上面这个儿子标签的前面.)
    父级标签.insertBefore(新标签,某个儿子标签)
    示例
        var dd = document.getElementById('dd');  #找到父级标签
        var a = document.createElement('a');   #创建一个新的a标签
        var d2 = dd.children[1];  #找到父级标签下的某个儿子标签
        dd.insertBefore(a,d2);   #将a标签插入到上面这个儿子标签的前面.
#删除节点(父级标签中删除子标签)
    dd.removeChild(d2);  父级标签中删除子标签
        
#替换节点找到父级标签 创建替换 a标签 #找到要被替换的子标签 #替换
    var dd = document.getElementById('dd');  #找到父级标签
    var a = document.createElement('a');  #创建a标签
    a.innerText = '百度';  
    var d1 = dd.children[0];  #找到要被替换的子标签
    dd.replaceChild(a,d1);  #替换
    

文本操作

#找到文本
d1.innerText; 查看
设置:
    #只可以改文本
    d1.innerText = "<a href=''>百度</a>";  
    #可以改标签
    d1.innerHTML = "<a href=''>百度</a>";  能 够识别标签

属性操作

var divEle = document.getElementById("d1");#找到
divEle.setAttribute("age","18")  #添加比较规范的写法
divEle.getAttribute("age")#查看
divEle.removeAttribute("age")#删除

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

值操作

var inp = document.getElementById('username');
inp.value;  #查看值
inp.value = 'taibai'; #设置值

选择框:
    <select name="city" id="city">
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
    </select>
    
    var inp = document.getElementById('city');
    inp.value;  #查看值
    inp.value = '1';  #设置值
    

class的操作

var d = document.getElementById('oo'); 
d.classList;  #获得这个标签的class属性的所有的值
d.classList.add('xx2');  #添加class值
d.classList.remove('xx2'); #删除class值
d.classList.contains('xx2');  #判断是否有某个class值,有返回true,没有返回false
d.classList.toggle('xx2');  #有就删除,没有就增加

css操作

var d = document.getElementById('oo');
d.style.backgroundColor = 'deeppink';  有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写
d.style.height = '1000px'

事件

绑定事件的方式有两种

方式1:

<div id="d1" class="c1" onclick="f1();"></div>

<script>
    function f1() {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'yellow';
    }

</script>

方式2

    <div id="d1" class="c1"></div>

    var d = document.getElementById('d1');
    d.onclick = function () {
        d.style.backgroundColor = 'yellow';
    }

事件里面的this

绑定方式1:

this表示当前标签对象
<div id="d1" class="c1" onclick="f1(this);"></div>
function f1(ths) {
        // var d = document.getElementById('d1');
        // d.style.backgroundColor = 'yellow';
        ths.style.backgroundColor = 'yellow';

        var d = document.getElementById('d2');
        d.style.backgroundColor = 'yellow';
    }

方式2:

    <div id="d1" class="c1"></div>
    
    var d = document.getElementById('d1');
    d.onclick = function () {
        this.style.backgroundColor = 'yellow';
        // d.style.backgroundColor = 'yellow'; //this表示当前标签对象
    }

onblur和onfocus事件

 var inp = document.getElementById('username');
    inp.onfocus = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'pink';
    };
    // onblur 失去光标时触发的事件

    inp.onblur = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'green';
    };

onchange事件,域内容发生变化时触发

<select name="" id="jishi">
    <option value="1">太白</option>
    <option value="2">alex</option>
    <option value="3">沛齐</option>

</select>

// onchange事件，内容发生变化时触发的事件
    var s = document.getElementById('jishi');
    s.onchange = function () {
        //this.options  select标签的所有的option标签
        //this.selectedIndex被选中的标签在所有标签中的索引值
        console.log(this.options[this.selectedIndex].innerText + '搓的舒服');
    }
    
    
用户名:<input type="text" id="username">    

    //input标签绑定onchange事件
    var inp = document.getElementById('username');
    inp.onchange = function () {
        console.log(this.value);  
    };    

原文地址：https://www.cnblogs.com/saoqiang/p/11396421.html