js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

js介绍

js运行编写在浏览器上的脚本语言（外挂，具有逻辑性）
脚本语言：运行在浏览器上的独立的代码块（具有逻辑性）

操作BOM   浏览器对象盒子
操作DOM   文本对象

js三种引入方式

（1）行间式：书写在代码块写在全局事件属性中

<div id="box" onclick="this.style.backgroundColor = 'red'; "></div>

（2）内联式：书写在body最下方

<div id="temp"></div>

// js引入
<script>
    temp.onclick = function () {
        // 完成某一项功能
        this.style.width = "400px";  // this => temp
    }
</script>

（3）外联式：书写在cs文件中

<script src="1.js"></script>    书写在body最下方

res.onclick = function () {
    this.style.backgroundColor = 'red';
}

js选择器（getElementBy() 与 querySelector ）

document ：所有的文件对象

getElement系列选择器

id选择器： getElementById("box")

document.getElementById("box").onclick = function () {
    this.style.backgroundColor = 'red';
}

var box = document.getElementById("box");
box.onclick = function () {
    this.style.backgroundColor = 'red';
}

类选择器：getElementsByClassName('box')

var box = document.getElementsByClassName('box');   //获取标签，得到是数组

box[0].onclick = function () {
　　this.style.backgroundColor = 'red';
}

box[1].onclick = function () {
　　this.style.backgroundColor = 'red';
}

标签选择器：getElementsByTagName

var box = document.getElementsByTagName('box');   // 获取标签，得到的是数组

box[1].onclick = function () {
　　this.style.backgroundColor = 'red';
}

querySelector系列选择器

位置选择器（跟css选择器一样）

var box = document.querySelector( '.bb' );
var box1 = document.querySelectorAll( 'body .bb' );  获取的body下的 类名为bb 的所有选择器

js四种调试方式

alert()   弹出框
console.log()   浏览器控制台查看
document.write()     写在html页面中

断点调试

js操作页面文档（三步骤）

（1）获取页面元素对象
（2）为该对象绑定事件
（3）通过事件操作元素对象

var box = document.querySelector(".box");    //获取指定标签

// 绑定事件
box.onclick = function() {      
　　//操作内容
　　this.innerText = "innerText";  // 不能解析html标签
　　this.innerHTML = "<i>innerHTML</i>";  // 可以解析html标签
}

js修改标签内容

this.innerText = "innerText";  // 不能解析html标签
this.innerHTML = "<i>inn

js修改css样式

this.style.color = "red";

js修改类名

this.className = "box"     将类名改为box

在原类名上添加类名
    Cname = this.className
    cName = cName + " " + ".box"    将单类名改为双类名

清除类名
    this.className = "" ；

js设置属性

var img = document.querySelector('img');
img.setAttribute("src", "https://www.baidu.com/img/baidu_jgylogo3.gif");

js获取属性值

img.getAttribute("src")

js获取计算后样式 getComputedStyle()（获取的是内联式，外联式）

var box = document.querySelector( '.box' );

getComputedStyle( 元素对象，伪类 ).属性名
ftSize = getComputedStyle( box,null ).fontSize;    //只读内联，外联的样式值
this.style.color = "red";    //修改样式值

秒客网