JavaScript初步理解

155 阅读3分钟

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.为什么要阻止冒泡:可能会发生点击一个按钮,触发多种事件的情况