|
24 | 24 | * [03-04](https://github.com/TYRMars/JSlearn#03-04) `其他知识点-数组和对象的API` |
25 | 25 | #### 04 |
26 | 26 | * [04-01](https://github.com/TYRMars/JSlearn#04-01) `从基础知识到JS-Web-API` |
| 27 | +* [04-02](https://github.com/TYRMars/JSlearn#04-02) `DOM本质` |
| 28 | +* [04-03](https://github.com/TYRMars/JSlearn#04-03) `DOM节点操作` |
| 29 | + |
27 | 30 |
|
28 | 31 |
|
29 | 32 |
|
@@ -978,6 +981,82 @@ function forEach(obj,fn) { |
978 | 981 | * 常说的JS(浏览器执行的JS)包含两个部分： |
979 | 982 | * JS基础知识(ECMA262标准)； |
980 | 983 | * JS-Web-API(W3C标准)； |
| 984 | + |
| 985 | +## 04-02 |
| 986 | +### DOM操作 |
| 987 | +* Document Object Model |
| 988 | +* DOM是哪种基本的数据结构 |
| 989 | +* DOM操作的常用API有哪些 |
| 990 | +* DOM节点的attr和property有和区别 |
| 991 | +#### DOM的本质 |
| 992 | +* XML |
| 993 | +```XML |
| 994 | +<?xml version="1.0" encoding="UTF-8"?> |
| 995 | +<note> |
| 996 | +<to>Tove</to> |
| 997 | +<from>Jani</from> |
| 998 | +<heading>Reminder</heading> |
| 999 | +<body>Dont forget me this weekend</body> |
| 1000 | +<other> |
| 1001 | +<a></a> |
| 1002 | +<b></b> |
| 1003 | +</other> |
| 1004 | +</note> |
| 1005 | +``` |
| 1006 | +* XML |
| 1007 | +```HTML |
| 1008 | +<!DOCTYPE html> |
| 1009 | +<html> |
| 1010 | +<head> |
| 1011 | + <meta charset="utf-8"> |
| 1012 | + <title>Document</title> |
| 1013 | +</head> |
| 1014 | +<body> |
| 1015 | + <div> |
| 1016 | + <p>this is p</p> |
| 1017 | + </div> |
| 1018 | +</body> |
| 1019 | +</html> |
| 1020 | +``` |
| 1021 | + |
| 1022 | +## 04-03 |
| 1023 | +### DOM节点操作 |
| 1024 | +* 获取DOM节点 |
| 1025 | +* prototype,获取JS对象上的属性 |
| 1026 | +* Attribute,获取DOM标签上的属性 |
| 1027 | +#### 获取DOM节点 |
| 1028 | +```JavaScript |
| 1029 | +var div1 = document.getElementById('div1'); //元素 |
| 1030 | +var divList = document.getElementByTagName('div'); //集合 |
| 1031 | +console.log(divList.length); |
| 1032 | +console.log(divList[0]); |
| 1033 | + |
| 1034 | +var containerList = document.getElementByClassName('.container'); //集合 |
| 1035 | +var pList = document.querySelectorAll('p'); //集合 |
| 1036 | +``` |
| 1037 | +#### property |
| 1038 | +```JavaScript |
| 1039 | +var pList = document.querySelectorAll('p'); |
| 1040 | +var p = pList[0]; |
| 1041 | +console.log(p.style.width); // 获取样式 |
| 1042 | +p.style.width = '100px' // 修改样式 |
| 1043 | +console.log(p.className);//获取class |
| 1044 | +p.className = 'p1' //修改class |
| 1045 | + |
| 1046 | +// 获取 nodeName 和 ndoeType |
| 1047 | +console.log(p.nodeName); |
| 1048 | +console.log(p.nodeType); |
| 1049 | +``` |
| 1050 | +#### Attribute |
| 1051 | +```JavaScript |
| 1052 | +var pList = document.querySelectorAll('p'); |
| 1053 | +var p = pList[0]; |
| 1054 | +p.getAttribute('data-name'); |
| 1055 | +p.getAttribute('data-name','imooc'); |
| 1056 | +p.getAttribute('style'); |
| 1057 | +p.setAttribute('style','font-size:30px;'); |
| 1058 | +``` |
| 1059 | + |
981 | 1060 | --- |
982 | 1061 |
|
983 | 1062 | ### JSDemo JS小程序 |
|
0 commit comments