思想脉络:
DOM->一切都是节点->元素节点/属性节点/文本节点->三种主要节点的增删改查
- JavaScript里面的对象分为三种
//用户定义对象:程序员自己创建的对象
//内建对象:JavaScript语言里面定义好的对象
//宿主对象:浏览器提供的对象 - window对象对应着浏览器窗口本身,这个对象的属性和方法通常统称为Bom(窗口对象模型)
DOM
- dom把文档表示为一棵家谱树
shushushus.png
节点
- 元素节点
//在文档的布局中形成了文档的结构 - 文本节点
//元素节点只是节点类型的一种,如果只有结构没有内容页面只能空荡荡 - 属性节点
//用来对元素做出更加具体的描述,同样的元素,属性不一样展示出来的效果肯定也不一样
获取元素3种DOM方法
- getElementById('id')
- getElementByClassName(className)
- getElementByTagName('TagName')
//返回的是一个数组
DOM编程技巧
jiaoqiao.png
tongpei.png
z1.png
//因为getElementById()这个方法返回的是一个对象,这就提供了链式操作的可能
//其他两个不能的原因,是因为返回的是对象数组
学会了获取元素,就要学会获取和设置属性了
- getAttribute(attribute)
//获取属性 - setAttribute(attribute,value)
//允许对属性节点做出修改,接受2个参数,第一个是属性名称,第二个是对应名称的属性的值
小结:
//介绍了5个方法,这五个方法是编写许多DOM脚本的基石
DOM属性
- childNodes属性可以用来获取任何一个元素的所有子元素,它是一个数组
//因为是数组所以可以:node.childNodes[0] - nodeType属性
- NodeValue属性
- firstChild属性
- lastChild属性
动态创建标记(元素)
document.writer
innerHTML
createElement
createTextNode
appendChild
insertBefore
//通过创建新元素和修改现有元素来改变页面结构
z2.png
z3.png
z4.png
z5.png
web技术的知识大厦(一切围绕HTML转)
- HTML原本样式是写在标签里面的,因为随着页面的要求越来越高,标签的内联样式代码就变得臃肿,所以css诞生了,同样css也出现了这样的情况,less/sass/stylus这样的预处理出现了,让css的代码可复用,可结构化
- web页面的需求推动了JavaScript的出台,JavaScript根据HTML页面三大件:元素/属性/文本 开始了DOM生涯.因为DOM的缺陷衍生出了JQuery,随着前端技术的日趋完善,Mvvm框架出现了,Vue这类的框架直接代替你去操作DOM
如何学习DOM?
DOM的目的就是操作HTML页面,使其动态化
HTML的三大件:元素/属性/文本
为此DOM的主要API都是围绕三大件的增删改查
按照这样的思路去学DOM会非常快上手
- 元素Element的增删改查
- 属性的增删改查
- 文本的增删改查