diff --git "a/02\345\215\242\345\233\275\345\273\272/\344\275\234\344\270\232/11.18DOM\347\273\203\344\271\2401.html" "b/02\345\215\242\345\233\275\345\273\272/\344\275\234\344\270\232/11.18DOM\347\273\203\344\271\2401.html" new file mode 100644 index 0000000000000000000000000000000000000000..6653b2d2867e5a96e4f0add6b9c89187ab5db95e --- /dev/null +++ "b/02\345\215\242\345\233\275\345\273\272/\344\275\234\344\270\232/11.18DOM\347\273\203\344\271\2401.html" @@ -0,0 +1,53 @@ + + + + + + + Document + + + +   + + +
+
+ + + \ No newline at end of file diff --git "a/02\345\215\242\345\233\275\345\273\272/\347\254\224\350\256\260/11.18DOM(\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213).md" "b/02\345\215\242\345\233\275\345\273\272/\347\254\224\350\256\260/11.18DOM(\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213).md" new file mode 100644 index 0000000000000000000000000000000000000000..c85261b09221c060d9fbc21d0725619602b6a015 --- /dev/null +++ "b/02\345\215\242\345\233\275\345\273\272/\347\254\224\350\256\260/11.18DOM(\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213).md" @@ -0,0 +1,639 @@ +## DOM(文档对象模型) + +#### Javascript 与DOM的关系(百科) + +DOM定义了表示和修改文档所需的方法,DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类的对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。 + +| \| 属性 \| 描述 \| | | | +| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | +| | [17](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_17) | \| ---------------------------- \| ------------------------------------------------------------ \| | +| | [18](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_18) | \| document.activeElement \| 返回当前获取焦点的元素 \| | +| | [19](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_19) | \| document.anchors \| 返回对文档中所有 Anchor 对象的引用 \| | +| | [20](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_20) | \| document.applets \| 返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 元素 \| | +| | [21](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_21) | \| document.baseURI \| 返回文档的基础 URI \| | +| | [22](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_22) | \| document.body \| 返回文档的 body 元素 \| | +| | [23](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_23) | \| document.cookie \| 设置或返回与当前文档有关的所有 cookie \| | +| | [24](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_24) | \| document.doctype \| 返回与文档相关的文档类型声明 (DTD) \| | +| | [25](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_25) | \| document.documentElement \| 返回文档的根节点 \| | +| | [26](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_26) | \| document.documentMode \| 返回浏览器渲染文档的模式 \| | +| | [27](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_27) | \| document.documentURI \| 设置或返回文档的位置 \| | +| | [28](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_28) | \| document.domain \| 返回当前文档的域名 \| | +| | [29](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_29) | \| document.domConfig \| 已废弃,返回 normalizeDocument() 被调用时所使用的配置 \| | +| | [30](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_30) | \| document.embeds \| 返回文档中所有嵌入内容(embed)的集合 \| | +| | [31](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_31) | \| document.forms \| 返回文档中所有 Form 对象的引用 \| | +| | [32](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_32) | \| document.images \| 返回文档中所有 Image 对象的引用 \| | +| | [33](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_33) | \| document.implementation \| 返回处理该文档的 DOMImplementation 对象 \| | +| | [34](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_34) | \| document.inputEncoding \| 返回文档的编码方式 \| | +| | [35](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_35) | \| document.lastModified \| 返回文档的最后修改日期 \| | +| | [36](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_36) | \| document.links \| 返回对文档中所有 Area 和 Link 对象的引用 \| | +| | [37](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_37) | \| document.readyState \| 返回文档状态(载入中) \| | +| | [38](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_38) | \| document.referrer \| 返回载入当前文档的 URL \| | +| | [39](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_39) | \| document.scripts \| 返回页面中所有脚本的集合 \| | +| | [40](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_40) | \| document.strictErrorChecking \| 设置或返回是否强制进行错误检查 \| | +| | [41](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_41) | \| document.title \| 返回当前文档的标题 \| | +| | [42](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_42) | \| document.URL \| 返回文档的完整 URL \| | +| | [43](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_43) | | +| | [44](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_44) | ## Document 对象中的方法 | +| | [45](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_45) | | +| | [46](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_46) | \| 方法 \| 描述 \| | +| | [47](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_47) | \| --------------------------------- \| ------------------------------------------------------------ \| | +| | [48](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_48) | \| document.addEventListener() \| 向文档中添加事件 \| | +| | [49](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_49) | \| document.adoptNode(node) \| 从另外一个文档返回 adapded 节点到当前文档 \| | +| | [50](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_50) | \| document.close() \| 关闭使用 document.open() 方法打开的输出流,并显示选定的数据 \| | +| | [51](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_51) | \| document.createAttribute() \| 为指定标签添加一个属性节点 \| | +| | [52](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_52) | \| document.createComment() \| 创建一个注释节点 \| | +| | [53](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_53) | \| document.createDocumentFragment() \| 创建空的 DocumentFragment 对象,并返回此对象 \| | +| | [54](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_54) | \| document.createElement() \| 创建一个元素节点 \| | +| | [55](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_55) | \| document.createTextNode() \| 创建一个文本节点 \| | +| | [56](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_56) | \| document.getElementsByClassName() \| 返回文档中所有具有指定类名的元素集合 \| | +| | [57](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_57) | \| document.getElementById() \| 返回文档中具有指定 id 属性的元素 \| | +| | [58](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_58) | \| document.getElementsByName() \| 返回具有指定 name 属性的对象集合 \| | +| | [59](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_59) | \| document.getElementsByTagName() \| 返回具有指定标签名的对象集合 \| | +| | [60](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_60) | \| document.importNode() \| 把一个节点从另一个文档复制到该文档以便应用 \| | +| | [61](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_61) | \| document.normalize() \| 删除空文本节点,并合并相邻的文本节点 \| | +| | [62](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_62) | \| document.normalizeDocument() \| 删除空文本节点,并合并相邻的节点 \| | +| | [63](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_63) | \| document.open() \| 打开一个流,以收集来自 document.write() 或 document.writeln() 方法的输出 \| | +| | [64](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_64) | \| document.querySelector() \| 返回文档中具有指定 CSS 选择器的第一个元素 \| | +| | [65](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_65) | \| document.querySelectorAll() \| 返回文档中具有指定 CSS 选择器的所有元素 \| | +| | [66](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_66) | \| document.removeEventListener() \| 移除文档中的事件句柄 \| | +| | [67](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_67) | \| document.renameNode() \| 重命名元素或者属性节点 \| | +| | [68](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_68) | \| document.write() \| 向文档中写入某些内容 \| | +| | [69](https://gitee.com/level-21-software-class-4/java-script/pulls/450/files#de9af4b9097a537b529111bbf420a65b1c8b1c06_0_69) | \| document.writeln() \| 等同于 write() 方法,不同的是 writeln() 方法会在末尾输出一个换行符 \| | + +#### DOM常用API + +###### 文档级节点 + +document:DOM中最大的节点 + +document.documentElement + +document.head + +document.title(可修改):获取标题 + +document.body + +##### 子节点: + +###### 文本节点+元素节点 + +document.body.childNodes //返回nodelist类数组 + +###### 节点类型 + +```js + +for(var i = 0; i我是div +

这是第1个h2

+

这是第2个h2

+

这是第3个h2

+ + + + + +``` + + + +#### DOM克隆元素 + +```js + +
+

我是div外面的 h2

+
+
+ +
+ + +``` + + + +#### 获取属性节点的值 + + + +```js + +

我是h2

+ +``` + +#### 案例 + +有个button,有个h2,当点击button时会显示文字,再次点击会文字会消失。 + +```js + + + + +

我是h2

+ + +``` + + + +#### innerHTML与innerText的区别 + +- innerHTML获取的是文本内容和标签,但是innerText是只获取文本内容 + +- innerHTML具备解析字符串的能力,但是innerText没有 + + ```js + + + +
+

我是h2

+
+ + + ``` + +#### 练习:自定义添加和删除工作经历 + +```js + + + + + 动态添加和删除节点 + + + + +

工作经历

+
+
+
+ 公司名称: + 职位: + 删除工作经历 +
+ 工作职责及工作内容描述: + +
+
+
+ +
+ 添加工作经历 +
+ + + +``` + + + + + +#### dom获取表单的值 + +1. ##### **获取**text输入框的值 + +```js + + +
+ +``` + +##### 2.单选&多选 + +```js + 泡面
+ + +``` + +**练习**:**实现全选和反选功能** + +```js + 泡面
+ 火腿
+ 香肠
+ 卤蛋
+   +``` + + + +##### 3.获取下拉框的值 + +```js + + + + + 修改标题,背景颜色和前景颜色 + + + + + + 文字颜色: + + 背景颜色: + +

+

+ JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。 + 它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言, + 最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。 +

+ + + + +``` + + + +#### 操作style样式 + +```js + + +
+
+ +``` + + + +#### 父子节点练习 + +```js + + + + + 节点信息访问 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 全选 + 反选 + 姓名性别专业爱好
刘备软件开发抽烟
关羽国际贸易喝酒
张飞园林设计烫头发
赵云平面设计抽烟
黄忠影视制作玩游戏
小乔高级护理唱歌
+ + +``` +