xml数据包

time 0
微信通过xml来传输数据
image.png

作业

time 3m44s

document

time 40m30s
document其实是一个对象object,类似于以下代码

  1. <div id="box">123123</div>
  2. <script>
  3. document={
  4. getElementById('box');
  5. }
  6. </script>

getElementById

  1. <div id="box">123123</div>
  2. <script>
  3. var box=document.getElementById('box');
  4. console.log(box);
  5. </script>

image.png

getElementsByTagName

time 48m23s

  1. <div>123123</div>
  2. <div>234234</div>
  3. <script>
  4. var box = document.getElementsByTagName('divP');
  5. console.log(box);
  6. </script>

image.png

getElementsByClassName

time 54m42s

  1. <div class="box">123123</div>
  2. <div class="box">234234</div>
  3. <script>
  4. var boxes = document.getElementsByClassName('box');
  5. console.log(boxes);
  6. </script>

image.png

querySelector() 与 querySelectorAll

time 58m45s
HTML5新引入的WEB API,很早以前就有,html5才正式引入,比getElementsByClassName还早

  1. <div class="text">123</div>
  2. <div class="text">234</div>
  3. <script>
  4. var div1=document.querySelector('div');
  5. var div2=document.querySelector('.text');
  6. console.log(div2);
  7. </script>

image.png
querySelector只能选择一个,

time 1h5m43s

获取元素

getElementById

image.png
image.png
image.png
拿到一个元素,除了ById是选择一个,其它都是选择多个,一组的
image.png
image.png
这是类数组,不能用push方法

image.png

document.querySelector()

文档对象模型[Document](https://developer.mozilla.org/zh-CN/docs/Web/API/Document)引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 [HTMLElement](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement)对象。 如果找不到匹配项,则返回null

image.png

image.png

  1. <div class="text">123</div>
  2. <div>234</div>
  3. <script>
  4. var div1 = document.querySelector('div');
  5. var div2 = document.querySelector('.text')
  6. console.log(div1)
  7. console.log(div2)
  8. </script>

image.png
只会选择第一个
image.png
可以用选择器

document.querySelectorAll

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div class="text">123</div>
  11. <div class="text">456</div>
  12. </body>
  13. <script>
  14. var text = document.querySelector('.text');
  15. console.log(text);
  16. var text2 = document.querySelectorAll('.text');
  17. console.log(text2);
  18. </script>
  19. </html>

image.png
image.png

querySelector缺陷

querySelector() 与 querySelectorAll 方法的缺陷

1.性能
2.不实时 有增删dom操作时不能实时更新
demo
系统实时变化没有用

  1. <body>
  2. <div class="text">123</div>
  3. <div class="text">456</div>
  4. </body>
  5. <script>
  6. var divs = document.querySelectorAll('div');
  7. console.log(divs);
  8. divs[0].remove();
  9. console.log(divs);
  10. </script>

image.png

遍历元素节点树

image.png
image.png
节点不是元素,节点包含元素,不止是元素
遍历节点树 - 元素节点树
节点包含元素 -> 元素节点 = DOM 元素
image.png

1.parentNode

指的是上一级的父元素,一个元素只有一个父元素,一个父元素可能有多个子元素。一个父亲可能有多个儿子,只有一个。离着最近的父元素

  1. <body>
  2. <ul>
  3. <li>
  4. <h2>h2</h2>
  5. <a href="">a</a>
  6. <p>p</p>
  7. </li>
  8. </ul>
  9. </body>
  10. <script>
  11. // var a = document.getElementsByTagName('a')[0].parentNode;
  12. //支持.parentNode.parentNode
  13. var a = document.getElementsByTagName('a')[0];
  14. console.log(a);
  15. </script>

image.png

image.png
链式结构
image.png

2.childNodes

  1. <body>
  2. <ul>
  3. <li>
  4. <!-- 我是一个注释 -->
  5. <a href="">我是超级链接</a>
  6. <p>我是段落标签</p>
  7. <h1>我是标题标签</h1>
  8. </li>
  9. </ul>
  10. </body>
  11. <script>
  12. // 1.元素节点 = 1
  13. // 2.属性节点 = 2
  14. // 3.文本节点 text = 3 文本文字
  15. // 4.注释节点 comment = 8 注释
  16. // 5.document = 9
  17. // 6.DocumentFragement = 11
  18. //每一个节点有节点号,之后可以通过节点号过滤节点
  19. var li = document.getElementsByTagName('li')[0].childNodes; ////支持.childNodes.childNodes
  20. console.log(li);
  21. </script>
  1. <body>
  2. <ul>
  3. <li>
  4. text:1 comment:1<!-- 我是一个注释 --> text:2 a:1 <a href="">我是超级链接</a> text:3
  5. p:1 <p>我是段落标签</p> text:4
  6. h1:1 <h1>我是标题标签</h1> text:5
  7. </li>
  8. </ul>
  9. </body>
  10. <script>
  11. var li = document.getElementsByTagName('li')[0].childNodes; ////支持.childNodes.childNodes
  12. console.log(li);
  13. </script>

注每个换行是一个文本节点节点
li是个对象,继承自document,htmldocument的对象,上面有方法,可以调用
image.png
image.png

  1. <body>
  2. <ul>
  3. <li>
  4. <!-- 我是一个注释 --><a href="">我是超级链接</a><p>我是段落标签</p><h1>我是标题标签</h1>
  5. </li>
  6. </ul>
  7. </body>
  8. <script>
  9. var li = document.getElementsByTagName('li')[0].childNodes; ////支持.childNodes.childNodes
  10. console.log(li);
  11. </script>

没有换行就没有text节点
image.png

  1. <body>
  2. <ul>
  3. <li>
  4. <!-- 我是一个注释 -->
  5. <a href="">我是超级链接</a>
  6. <p>我是段落标签</p>
  7. <h1>我是标题标签</h1>
  8. </li>
  9. </ul>
  10. </body>
  11. <script>
  12. var li = document.getElementsByTagName('li')[0].childNodes; ////支持.childNodes.childNodes
  13. console.log(li);
  14. </script>

3.firstChild

Node.firstChild

Node.firstChild 只读属性返回树中节点的第一个子节点,如果节点是无子节点,则返回 null。
image.png

  1. <ul>
  2. <li>
  3. <!-- 我是一个注释 -->
  4. <a href="">我是超级链接</a>
  5. <p>我是段落标签</p>
  6. <h1>我是标题标签</h1>
  7. </li>
  8. </ul>
  9. <script>
  10. var li = document.getElementsByTagName('li')[0];
  11. console.log(li.lastChild)
  12. </script>

image.png
文本节点

image.png
image.png

lastChild

**Node.lastChild** 是一个只读属性,返回当前节点的最后一个子节点。如果父节点为一个元素节点,则子节点通常为一个元素节点,或一个文本节点,或一个注释节点。如果没有子节点,则返回 null

nextSibling

**Node.nextSibling** 是一个只读属性,返回其父节点的 [childNodes](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/childNodes) 列表中紧跟在其后面的节点,如果指定的节点为最后一个节点,则返回 null

previousSibling

返回当前节点的前一个兄弟节点,没有则返回null.

demo

  1. <body>
  2. <ul>
  3. prev
  4. <li> 123
  5. <!-- 我是一个注释 -->
  6. <a href="">我是超级链接</a>
  7. <p>我是段落标签</p>
  8. <h1>我是标题标签</h1>
  9. 456</li>
  10. next
  11. </ul>
  12. </body>
  13. <script>
  14. // 1.元素节点 = 1
  15. // 2.属性节点 = 2
  16. // 3.文本节点 text = 3
  17. // 4.注释节点 comment = 8
  18. // 5.document = 9
  19. // 6.DocumentFragement = 11
  20. var li = document.getElementsByTagName('li')[0];
  21. console.log(li.firstChild);//child必须在父元素内部,必须在li内部
  22. console.log(li.lastChild);
  23. console.log(li.nextSibling);//不在内部,在外部
  24. console.log(li.previousSibling);
  25. </script>

image.png
如果没有123,结果就是如下图
image.png
text文档

parentElement

image.png
父元素,不是父节点,document是元素,不是节点
image.png
返回元素内容,与parentnode很像

children

image.png

  1. <ul>
  2. prev
  3. <li> 123
  4. <!-- 我是一个注释 -->
  5. <a href="">我是超级链接</a>
  6. <p>我是段落标签</p>
  7. <h1>我是标题标签</h1>
  8. 456</li>
  9. next
  10. </ul>
  11. <script>
  12. var li=document.getElementsByTagName('li')[0];
  13. console.log(li.parentElement);
  14. console.log(li.children);
  15. console.log(li.childNodes);
  16. </script>

image.png

parentElement

childElementCount = children.length

firstElementChild

lastElementChild

nextElementSibling

previousElementSibling

children

  1. <body>
  2. <ul>
  3. prev
  4. <li> 123
  5. <!-- 我是一个注释 -->
  6. <a href="">我是超级链接</a>
  7. <p>我是段落标签</p>
  8. <h1>我是标题标签</h1>
  9. 456</li>
  10. next
  11. </ul>
  12. </body>
  13. <script>
  14. var li = document.getElementsByTagName('li')[0],
  15. p = document.getElementsByTagName('p')[0];
  16. console.log(li.parentElement); //IE9
  17. console.log(li.childElementCount); //IE9
  18. console.log(li.firstElementChild); //IE9
  19. console.log(li.lastElementChild); //IE9
  20. console.log(p.nextElementSibling); //IE9
  21. console.log(p.previousElementSibling); //IE9
  22. </script>

image.png

封装获取祖先元素方法 elemParent

  1. // 获取祖先元素 node节点 n数字
  2. function elemParent(node,n){
  3. var type = typeof(n);
  4. if(type==='undefined'){
  5. return node.parentNode;
  6. }else if(n<=0|| type !=='number'){
  7. return undefined;
  8. }
  9. while(n){
  10. node = node.parentNode;
  11. n--;
  12. }
  13. return node;
  14. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title></title>
  8. </head>
  9. <body>
  10. <ul>
  11. prev
  12. <li> 123
  13. <!-- 我是一个注释 -->
  14. <a href="">我是超级链接</a>
  15. <div>
  16. <p>我是段落标签</p>
  17. </div>
  18. <h1>我是标题标签</h1>
  19. 456</li>
  20. next
  21. </ul>
  22. <script>
  23. var p=document.getElementsByTagName('p')[0]
  24. // console.log(p)
  25. console.log(elemParent(p))
  26. console.log(elemParent(p,1));
  27. console.log(elemParent(p,2));
  28. console.log(elemParent(p,3)) ;
  29. function elemParent(node, n) {
  30. var type = typeof n;
  31. // console.log(type)
  32. if (type === "undefined") {
  33. return node.parentNode;
  34. } else if (n <= 0 || type !== "number") {
  35. return undefined;
  36. }
  37. while (n) {
  38. node = node.parentNode;
  39. n--;
  40. }
  41. return node;
  42. }
  43. </script>
  44. </body>
  45. </html>

image.png