document.querySelector()       
//不支持 IE7 及以下

document.querySelectorAll()
// 不支持 IE7 及以下

document.querySelectorAll("[class^='text-']") 
// 获取所有class 以 text开头的元素

console.log (document.head);//head
console.log (document.body);//body
console.log(document.title);////title标签的文字内容，可以赋值修改title
console.log(document.documentElement);//html

 document.title = "我修改后的title";

let obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
};
console.log(obj[0]); // 'a'
console.log(obj[1]); // 'b'
console.log(obj.length);//3
obj.push('d'); //// TypeError: obj.push is not a function

//对象obj就是一个类似数组的对象。但是，“类似数组的对象”并不是数组，因为它们不具备数组特有的方法。
//对象obj没有数组的push方法，使用该方法就会报错。

let obj = {
    length: 0
};

obj[3] = "tian有点飒";
console.log(obj.length);

//对象obj添加了一个数字键，但是length属性没变。这就说明了obj不是数组。

<div id="Wrap"></div>

let oWrap = document.getElementById( "wrap" );

oWrap.onclick = function() {
    	// wrap容器被点击时执行的内容
           console.log("已被点击");
        }

oWrap.onmouseenter = function() {
            console.log("鼠标移入了");
        }

<div id="Wrap"></div>

//获取wrap节点对象
let oWrap = document.getElementById( "wrap" );

oWrap.innerText= "<ul><li>黛玉</li><li>黛玉</li></ul>";
//innerText不会解析标签
//大部分就是字符串和数字，数字本身也是转化为字符串再赋值进来
oWrap.innerText = tianDSB;//此时报错 没有这个变量



oWrap.innerHTML = "<ul><li>黛玉</li><li>宝钗</li></ul>";
//innerHTML会解析标签

//  取值
console.log(oWrap.innerText);
console.log(oWrap.innerHTML);

oBox.style.color = "red";
oBox.style.backgroundColor = 'red' ; //css属性名要设置成完整驼峰形式
oBox.style.fontSize = "20px";  //注意写单位
oBox.style.cssFloat = "left";
//不会覆盖内部或外部样式表

<div id="wrap"></div>

let oWrap = document.getElementById("wrap");

oWrap.title = "这是提示";
console.log(oWrap.title)
console.log(oWrap.yunmu);//只有合法标签属性才提供直接.操作
oWrap.id = "list";
oWrap.className = "box"; //class比较特殊

// 获取getAttribute()
<div id="wrap" yunmu="dsb">div</div>

console.log( oWrap.getAttribute("yunmu") );

// 设置setAttribute()
oWrap.setAttribute("daiyu" , "黛玉");
console.log(wrap);

// 删除removeAttribute()
oWrap.removeAttribute("daiyu")

#wrap{
    width: 200px;
    height: 200px;
    background-color: green;
}
<div id="wrap"></div>

let oWrap = document.getElementById("wrap");
oWrap.onclick = function(){
    oWrap.style.width = "300px";
    oWrap.style.height = "300px";
    oWrap.style.backgroundColor  = "pink";
}
//改写
oWrap.onclick = function(){
oWrap.style = "width: 300px; height:300px; background-color:purple"
   }
//字符串赋值给了对象  不合理的写法   最好写到cssText
oWrap.onclick = function(){
	oWrap.style.cssText = "width:300px;height:300px;background-color:purple"
}

#nav{
    width: 150px;
    height: 50px;
    background-color: pink;
    text-align: center;
    line-height: 50px;
    color: #fff;
    cursor: pointer;
    transition: 1s;
}
        
#nav.show{
    height: 200px;
}

<div id="nav">文字</div>

let oNav = document.getElementById("nav");

oNav.onclick = function() {
    oNav.className = "show"
}

<div id="wrap" class="con"></div>


let oWrap = document.getElementById("wrap");
oWrap.className = "aa bb";//通过className添加两个类名  会覆盖原有的类名

oWrap.className = oWrap.className + " aa bb"//如此添加太过生硬

 oWrap.classList.add("aa")//能自动处理空格和辨别相同类名

oWrap.classList.add("aa" , "bb")

<div id="wrap1"> 如果云曾是天空的一封信</div>

let oWrap = document.getElementById("wrap1");

//事件函数
oWrap.onclick = function(){
    // oWrap.style.color = "skyblue"; 

    /*事件是添加给wrap , 事件函数里面又在操控wrap*/

    this.style.color = "pink"
    // 使用this关键字可以代替,你触发的是owrap的点击事件这个this就指向oWrap
    // 涉及到js的垃圾回收,后面会说.这个this只在事件函数里面使用
}

<div id="wrap1"> 如果云曾是天空的一封信</div>
<div id="wrap2"> 如果云曾是天空的一封信</div>


let oWrap1 = document.getElementById("wrap1");
let oWrap2 = document.getElementById("wrap2");
oWrap1.onclick = function () {
    this.style.color = "pink"
}

oWrap1.onclick = function () {
    this.style.color = "pink"
}

//使用this可以改写为
function changeColor(){
    this.style.color = "pink"
}

oWrap1.onclick = changeColor;
oWrap2.onclick = changeColor;
//函数的上下文(this关键字）由调用函数的方式决定，function是“运行时上下文”策略,函数如果不调用，则不能确定函数的上下文
//规则1:对象打点调用它的方法函数，则函数的上下文是这个打点的对象


//事件处理函数的上下文是绑定事件的DOM元素