思想脉络:

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的增删改查
• 属性的增删改查
• 文本的增删改查