JavaScript的DOM

JavaScript的DOM

Dom

• 它是文档对象模型，处理可扩展标记语言（HTML/XML）的接口。
• 处理元素，节点返回对象。

获取元素

1. A：ID
   document.getElementById(‘字符串’);
   通过id名，获取元素，返回的是object。
2. B：标签名
   document.getElementByTagName();
   element.getElementByTagName();
   通过标签名，获取元素，返回对象集合，伪数组。
3. C：HTML5新增
   类：
   document.getElementByClassName(‘类名’);
   通过类名，获取元素，返回类集合。
   选择器：
   a：document.querySelector();
   .box(获取类）#lis（获取id）li（获取标签）,返回选择器的第一个值。
   b：document.querySelectorAll();
   返回所选择的全部值。
4. D：特殊元素获取
   body：
   document.body();
   hrml:
   document.documentElement();

事件三要素

1. 获取事件源
2. 注册，事件类型（如何触发）/也可不添加事件
   获取焦点（onfocus) 失去焦点（onblur）
3. 事件处理程序（函数赋值的形式）

操作DOM元素属性

1. 修改元素内容
   a：element.innerText(不标准）
   b：element.innerHTML(W3C)
   相同点：二者都是可读写的，可以获取元素内容
   区别：HTML可以识别html标签，并且读取内容时，保留空格和换行。
   Text不识别html标签，并且去除全部空格和换行。
2. 修改元素属性
   element.src/alt/href/id/alt/title
3. 修改表单元素的属性
   表单元素特殊,单独修改
   element.type/value/checked/select/disable
4. 修改样式属性（大小，颜色，位置）
   a：element.style.样式某一个属性（驼峰命名法）；
   生成行内样式，权重高。
   适用于，修改样式少，功能简单
   b：element.className=‘类名样式’；
   一个类名样式会覆盖原来的类名，所以一般写多个类名样式。
5. 获取自定义属性
   element.getAttribute(‘属性’);
   主要获取我们程序员自己定义的属性
   element.属性
   获取内置属性，元素本身自带的
6. 设置属性值
   element.setAttribute(‘属性’，‘值’)
   class特殊，写的就是class不是className
   element.属性=‘值’
7. 移除属性
   element.removeAttribute(‘属性’)；
8. h5新增自定义属性
   作用：保存和使用数据
   一般是data-开头
   h5新增获取
   element.dataset.属性/element.dataset[‘属性’]；
   要考虑兼容性问题，并且属性名多个短横链接，需要驼峰命名法，并且必需是以data-开头的属性。