JavaScript里的初步语法
js从上往下一行行编译
document.write("")在body里写入内容
console.log("")向控制台里输入内容
JS中内置的几种类型:
●number: 数字. 不区分整数和⼩数.
●boolean: true 真, false 假.
●string: 字符串类型
●undefined: 只有唯⼀的值 undefined. 表示未定义的值
●null: 只有唯⼀的值 null. 表示空值
关于DOM:主对象,有浏览器提供的
DOM通过js操作整个页面,包含文档,对象,模型
一个html页面就是一个文档
页面的每一个部分都转换成对象
模型用于表示每个对象之间的关系
Node为结点
结点是构成网页的基本组成部分,网页的各个部分都可以当作一个结点
结点分为:
| 标题 | 含义 |
|---|---|
| 文档结点 | 整个网页 |
| 元素节点 | HTML里的标签 |
| 属性节点 | 元素的属性,例如id |
| 文本节点 | html里的标签文本 |
调方法,改属性
innerHTML可以修改内部的html
关于事件
行为发生之后处理事件
事件就是用户和浏览器的交互行为
例如,点击按钮,鼠标移动,关闭窗口
属性 = 一个函数
读取到一行就运行到一行
onload会在整个页面加载完之后触发
window.onload = function(){
}
onload事件会在整个页面加就完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加就完成之后执行, 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
DOM查询
元素即为标签
获取元素节点
通过document获取
,通过document对象调用
| 标题 | 含义 |
|---|---|
| getElementById() | 通过id属性获取一个元素节点对象 |
| getElementsByTagName() | 通过标签名获取一组元素节点对象 |
| getElementsByName() | 通过name属性获取一组元素节点对象 |
举例
var btn1 document.getElementById("btn1");
btn1.onclick function(){
//查找#bj节点
var bj document.getElementById("bj");
//打印bj
/innerHTML通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
getElementsByTagName()可以根据签名来获取一组元素节点对象
这个方法会给我们返回一个类数组对象
获取元素节点的子节点
·通过具体的元素节点调用
| 标题 | 含义 |
|---|---|
| getElementsByTagName() | 方法,返回当前节点的指定标签名后代节点 |
| childNodes | 属性,表示当前节点的所有子节点 |
| firstChild | 属性,表示当前节点的第一个子节点 |
| lastChild | 属性,表示当前节点的最后一个子节点 |
冒泡相关理解
1.冒泡:页面是由文档流(即dom树组成的),当我们在一个时间触发的时候,这个事件就像这个气泡一样,从dom树的底层,一层一层的往上面传递,一直传递到dom的根节点,如果子元素和父级元素触发的是相同事件的时候,当子元素被触发的时候父元素也会被触发冒泡机制
2.在vue里阻止事件冒泡:用.stop修饰符(v-on:click.stop)绑定在子元素上面,阻止其向父元素冒泡,从而达到不会触发冒泡事件JS里阻止冒泡 event.stopPropagation();
3.为什么要阻止冒泡:可能会发生点击一个按钮,触发多种事件的情况