黑马程序员技术交流社区
标题: 【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day01 [打印本页]
作者: 小鲁哥哥 时间: 2017-8-10 14:13
标题: 【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day01
本帖最后由 小鲁哥哥 于 2017-8-10 14:13 编辑
【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day01
传智播客温馨提示：前四天学习了JS中的数据类型、条件表达式以及函数和对象的声明及使用，本节主要讲解DOM的基本概念及使用方法。
DOM基本概念DOM Document Object Model 文档对象模型就是把HTML文档模型化，当作对象来处理
DOM提供的一系列属性和方法可以视作一个工具箱，极大地方便了我们对文档的处理。
内容概念文档(Document)：就是指HTML或者XML文件
节点(Node)：HTML文档中的所有内容都可以称之为节点，常见的节点有元素节点、属性节点、文本节点、注释节点
元素(Element)：HTML文档中的标签可以称为元素
结构概念父节点 当前节点的父级
子节点 当前节点的子级
兄弟节点 和当前节点同属一个父级的节点
获取元素getElementById()
通过id寻找一个元素（找到的是一个元素对象）该方法只能被document对象调用（同一个文档中id不能重复）
getElementsByTagName()
通过标签名寻找一类元素（找到的是由元素对象组成的伪数组）即可以被document调用，又可以被元素对象调用，被元素对象调用时表示在该元素对象内部执行查找
设置属性元素对象.属性名 = “属性值”;
等价于
<标签 属性名=”属性值”>
绑定事件事件三要素
事件源.事件 = function(){ 事件处理程序 };
等价于
<标签 事件=”事件处理程序”>
对象方法中的this永远指的是该方法所属的那个对象
常用属性常用标签属性DOM对象的属性和HTML的标签属性几乎是一致的，常用的有src、title、className、href和style
其中className对应就是标签的class属性，但是由于class在JS中是关键字，所以变成了className
内部文本属性innerHTML
获取和设置标签中的内容，设置的内容会当作节点对象被解析到DOM树上
innerText
获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版ff不支持）
textContent
获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版IE不支持）
可以通过能力检测封装一个自己的设置内部文本的方法并放到自己的JS工具包中\
常用表单属性常见的表单元素属性有： type、value、checked、selected、disabled
type可以设置input元素的类型
value可以设置input元素的值
checked可以设置input元素是否选中
selected 可以设置下拉列表select中的option是否被选中
disabled 可以设置input元素是否被禁用
文本框获取焦点和失去焦点
获取焦点事件是onfocus 失去焦点事件是onblur (不是所有的标签都有这个事件) 更多详细内容可以查阅w3School
自定义属性对象的自定义属性
可以像给对象设置属性一样，给元素对象设置属性
标签的自定义属性
可以通过getAttribute()和setAttribute()设置和获取标签属性，通过removeAttribute()移除标签的属性
正常浏览器中 HTML中有规定的属性 两种方式才可以相互设置和获取
总之用setAttribute设置的就用getAttribute获取用对象的自定义属性设置的就用对象的自定义属性获取 以免出问题
节点
节点类型node.nodeType
1表示元素节点 2表示属性节点 3表示文本节点
节点层次所有获取节点相关属性都没有兼容性问题
childNodes //子节点
children //子元素虽然不是早期DOM标准中的方法，但是所有浏览器都支持
nextSibling //下一个兄弟节点
nextElementSibling //下一个兄弟元素 有兼容性问题
previousSibling//上一个兄弟节点
previousElementSibling //上一个兄弟元素 有兼容性问题
firstChild //第一个节点
firstElementChild //第一个子元素 有兼容性问题
lastChild //最后一个子节点
lastElementChild //最后一个子元素 有兼容性问题
parentNode //父节点 （一定是元素节点，所以无需处理）
样式属性style属性是对象，style对象的属性是字符串
style只能获取和设置行内样式
DOM对象中style的属性和标签中style内的值几乎一样
只是带有 - 的属性名较为特殊（如background-color变成了backgroundColor），因为在JS中 - 不能作为标识符
设置和获取样式
//通过对象的style属性只能设置和获取行内样式
//获取样式的时候 如果行内没有该样式 输出空字符串
//设置样式的时候 赋的值是一个字符串 如果这个属性有单位一定要节点加单位
什么情况通过class控制样式什么情况通过style控制样式
不严格的说：
//如果样式很多 通过 直接控制类名 的方式加样式
//如果样式比较少 通过直接设置比较方便
严格来说：
//从标准的角度讲 即使是样式比较少的时候 设置样式也要用类名
//但是有一类情况 是无论如何也必须直接通过JS加的 那就是涉及到计算的时候
动态创建元素
插入和移除节点克隆节点
要克隆的节点.cloneNode(布尔值);
在父元素中的最后追加子元素
father.appendChild(要追加的节点对象);
在父元素中的某个子元素前面插入子元素
father.insertBefore(要插入的节点对象,插到这个节点对象的前面);
从父元素中移除子元素
father.removeChild(要移除的子节点对象);
清空父元素
father.innerHTML=””;在清空内容的时候和事件相关的函数不会被销毁，任然遗留在内存中
因此如果方便的话，建议使用father.removeChild(son)来清除
动态创建结构方式一：直接在文档中书写
document.write(“内容”)
方式二：改变元素对象内部的HTML
innerHTML=”内容”
方式三：创建或克隆节点并追加
createElement()
cloneNode()
通过这两种方法创建出来的元素只是保存在内存中，必须放到页面上才行!
今天的讲解到此结束，如果小伙伴们还有什么不懂的可以在下方留言，或者去黑马程序员官网下载最新资料进行学习。http://www.itheima.com/
作者: 小东姐姐 时间: 2017-8-10 17:01
感谢分享{:8_488:}
作者: jingxian90 时间: 2017-8-17 09:24
条理清晰，通俗易懂，简明扼要
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |