DOM初识、三种节点、Document对象、Element对象、Attribute对象、ul动态添加li、获取属性、统计各种节点、获取多选按钮值、设置div颜色

目录

BOM介绍

DOM对html元素的访问

DOM模型中三种节点

Document对象

Element对象

Attribute对象

列：ul动态添加li

列：获取text框的值最大长度（获取属性）

列：统计div节点个数、获去div元素节点和文本节点

列：获取多选按钮选中的值

列：设置div颜色

---

BOM介绍

BOM-JavaScript是运行在浏览器中，提供了一系列对象与浏览器窗口进行交互，主要对象有：window、document、location、navigator和screen等，通常称为浏览器对象模型（Brower Object Model）

DOM对html元素的访问

dom（文档对象模型），它不是一种技术，而是一种访问节结构化文档的一种思想。

借助DOM模型，可以对DOM树进行修改、删除、增新等操作

DOM模型中三种节点

• 元素节点Element 各种标签就是元素节点的名称
• 文本节点text 包含在元素节点内部
• 属性节点Attrbute 修饰元素节点的就是属性节点

如：<a href="#">nihao</a>     a是元素节点，href是属性节点，nihao是文本节点

Document对象

1. 创建文本节点：document.createTextNode()
2. 创建元素节点：document.createElement()

Element对象

html页面中所有的标签都是element元素

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.firstChild	返回元素的首个子节点。
element.getAttribute()	返回元素节点的指定属性值。