权文哲_20200115-权文哲

知识点总结

一、bom编程

1、bom编程的概念

Browser Object Model 浏览器对象模型,用于操作浏览器中的各种对象,不同浏览器定义上是有差别的,实现方式也会有不同。

2、bom编程常用的对象

window 浏览器窗体对象
location 浏览器地址栏对象
history 历史记录对象

2.1 window对象

BOM的核心对象是window,它表示浏览器的一个实例。
注:只要是window的方法和属性,window对象名都可以省略

2.1.1 与对话框有关的方法

alert() 弹出一个确认按钮的信息框
string prompt(“提示信息”,"默认值”) 弹出一个输入信息框,返回字符串类型
boolean confirm("提示信息")
弹出一个信息框,有确定和取消按钮。
如果点确定,返回true,点取消返回false
console 向控制台输出,有log,warn,error等类型

2.1.2 与计时器有关的方法

setTimeout(函数名, 间隔毫秒数)
在指定的时间后调用1次函数,只执行1次,单位是毫秒。
返回值:返回一个整数类型的计时器
函数调用有两种写法:
1) setTimeout("函数名(参数)", 1000);
2) setTimeout(函数名,1000, 参数);
注意方式二:没有引号,没有括号
setInterval(函数名, 间隔毫秒数)
每过指定的时间调用1次函数,不停的调用函数,单位是毫
秒。
返回值:返回一个整数类型的计时器。
clearInterval(计时器) 清除setInterval()方法创建的计时器
clearTimeout(计时器) 清除setTimeout()方法创建的计时器

2.1.3 获取网页元素

document.getElementById(“id”) 通过id属性得到唯一的元素 如果页面上有多个同名的id,则得到第1个元素
document.getElementsByName(“name”) 通过name属性得到一组标签,返回一个数组
document.getElementsByTagName (“标签名”) 通过标签名字得到一组标签,返回一个数组
document.getElementsByClassName("类名") 通过类名得到一组标签,返回一个数组
document.querySelector("选择器") 根据选择器查询元素,返回一个元素
document.querySelectorAll("选择器") 根据选择器查询所有元素,返回一个数组

2.1.4 修改元素内容的几个方法和属性

方法:document.getElementById("id") 通过id得到一个元素,如果有同名的元素则得到第1个
属性:innerHTML 获得:元素内部的HTML 设置:修改元素内部的HTML
属性:innerText 获得:元素内部的文本 设置:修改元素内部的纯文本,其中的html标签不起作用

2.2 location对象

代表浏览器的地址栏对象

2.2.1 location 常用的属性

href 属性
获取href属性,获得当前地址栏访问的地址
设置href属性,用于页面的跳转,跳转到一个新的页面

2.2.2 location 常用的方法

reload() 重新加载当前的页面,相当于浏览器上的刷新按钮

3、history 对象

访问浏览器之前已经访问过的页面

3.1 方法

forward() 类似于浏览器上前进按钮
back() 类似于浏览器上后退按钮
go() 正数或负数,go(1)相当于forward(),go(-1)相当于back()

二、dom 编程

1、概念:Document Object Model 文档对象模型,用于操作网页中元素
2、作用:每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树,我们通过编写JS代码就可以访问这棵树上任何一个节点,并且对节点进行操作。通过 DO模型,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。新创建的元素对象,要挂到DOM树上才可以在网页上显示出来。

1、查找结点的方法

document.getElementById(“id”) 通过id属性得到唯一的元素 如果页面上有多个同名的id,则得到第1个元素
document.getElementsByName(“name”) 通过name属性得到一组标签,返回一个数组
document.getElementsByTagName (“标签名”) 通过标签名字得到一组标签,返回一个数组
document.getElementsByClassName("类名") 通过类名得到一组标签,返回一个数组
document.querySelector("选择器") 根据选择器查询元素,返回一个元素
document.querySelectorAll("选择器") 根据选择器查询所有元素,返回一个数组

1.1 扩展

这种方式需要用到html的dom操作方式(参考w3cschool的XML DOM操作),使用到的方法和属性有如下
几个

document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
元素对象.appendChild() 向节点的子节点列表末尾添加新的子节点
元素对象.removeChild() 删除子节点
元素对象.hasChildNodes() 返回元素是否拥有子节点
属性 作用
元素对象.firstChild 返回元素的首个子节点

2、js操作css样式

CSS JS 说明
color color 一个单词的样式写法是相同
font-size fontSize 驼峰命名法,首字母小写,第二个单词以后首字母大写

2.1 方式

(1).style.样式名 = "样式值";
(2).className = "类名";

注意:使用css操作样式,如果是操作style添加的是行内样式,也就是说是在元素的style属性中添加。如果是操作css的话是修改css属性的值,也就是将元素中如果原来有class会替换掉

三、js部分

1、js的历史、发展、概念。。。。。。。

2、变量()

心得体会

今天学习了js部分的dom操作和bom操作,在学校的学习由于学时较少,对js部分学习比较浅薄,所以一下子学习这么多新知识,好有点难以接受,不过好在每个小demo老师都从思想以及语法上进行细讲,也都基本理解掌握,加之用项目来巩固知识点,使我对这部分知识正我的更加牢固。同时整理知识点的时候又让我对es dom bom 整体组织结构有了更加深刻的认识。
练习的时候我还是存在手生,无从下手,没思路等问题,好在经过老师的点播和提醒,使我对编程思路有了更加深刻的体会。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1