JavaScript DOM对象

通过HTML DOM,可以访问JavaScript HTML文档的所有元素。

一、HTML DOM(文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM模型被构造为对象的树:

通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。

  • JavaScript能够改变页面中的所有HTML元素;
  • JavaScript能够改变页面中的所有HTML属性;
  • JavaScript能够改变页面中的所有CSS样式;
  • JavaScript能够对页面中的所有事件作出反应;

二、DOM节点

1.节点类型:HTML文档中的每个成分都是一个节点,DOM是这样规定的:

  • 整个文档是一个文档节点;
  • 每个HTML标签是一个元素节点;
  • 包含在HTML元素中的文本是文本节点;
  • 每一个HTML属性是一个属性节点;

其中,document与element节点是重点。

2.节点关系

节点树中的节点彼此拥有层级关系,父(parent),子(child)和同胞(sibling)等属于用于描述这些关系。父节点拥有子节点,同级的子节点被称为同胞(兄弟或者姐妹)。

  • 在节点树中,顶端节点被称为根(root);
  • 每个节点都有父节点,除了根(它没有父节点);
  • 一个节点可以拥有任意数量的子节点;
  • 同胞是拥有相同父节点的节点;

    下图展示了部分节点树的节点关系:

3.节点查找:有两种方式

方式一:直接查找节点

  1. // 节点查找(节点也就是一个个的标签)
  2. document.getElementById('idname'); //按照id查找,拿到的是一个标签对象
  3. document.getElementsByClassName('classname'); //按照class标签去找,得到的是一个数组里存放的标签
  4. document.getElementsByTagName('tagname'); //通过标签名去找,拿到的也是一个数组
  5. var a = document.getElementsByName('yuan'); //按照name属性去找,拿到的也是一个数组
  6. console.log(a);

length属性

  1. var ele = document.getElementById('div1');
  2. console.log(ele.length); //返回undified
  3. var ele2 = document.getElementById('div3');
  4. console.log(ele2.length); //返回undified
  5. var ele3 = document.getElementsByClassName('div2');
  6. console.log(ele3.length); //返回1
  7. var ele4 = document.getElementsByTagName('p');
  8. console.log(ele4.length) ; //返回1
  9. var ele5 = document.getElementsByName('haiyan');
  10. console.log(ele5.length); //返回1
  11. // id和name的不支持
  12. var div1=document.getElementById("div1");
  13. //支持;
  14. var ele= div1.getElementsByTagName("p");
  15. alert(ele.length);
  16. //支持
  17. var ele2=div1.getElementsByClassName("div2");
  18. alert(ele2.length);
  19. //不支持
  20. var ele3=div1.getElementById("div3");
  21. alert(ele3.length);
  22. //不支持
  23. var ele4=div1.getElementsByName("yuan");
  24. alert(ele4.length)

方式二:间接查找(导航查找节点,通过某个标签的位置去查找另一个标签,这是一个导航属性)

  1. parentElement // 父节点标签元素
  2. children // 所有子标签
  3. firstElementChild // 第一个子标签元素
  4. lastElementChild // 最后一个子标签元素
  5. nextElementtSibling // 下一个兄弟标签元素
  6. previousElementSibling // 上一个兄弟标签元素
  1. // 方式二:导航查找
  2. //<div id ='div1'>
  3. // <div class="div2" name = 'haiyan'>lallala</div>
  4. // <div name="haiyan">lkkaakkka</div>
  5. // <div id ='div3'>aaaaaaaaaaaaaa</div>
  6. // <p>hrllo</p>
  7. //</div>
  8. //注意:1.如果是数组的话后面切记getElementsByClassName('div2')[0]
  9. // 2.查找元素的那些方法Elements加了s的打印的就是数组
  10. // 1,==================
  11. var ele = document.getElementsByClassName('div2')[0];
  12. var ele1= ele.parentElement;
  13. console.log(ele1) ;//找div2标签的父亲
  14. // 2.===============
  15. var ele = document.getElementById('div1');
  16. var ele1 = ele.children;
  17. console.log(ele1) ; //找到div1下的所有的子标签
  18. // 3.===================
  19. var ele = document.getElementById('div1');
  20. var ele1 = ele.firstElementChild;
  21. console.log(ele1); //找到div1下的第一个子标签的元素
  22. // 4.==================
  23. var ele = document.getElementById('div1');
  24. var ele1 = ele.lastElementChild;
  25. console.log(ele1); //找到div1下的最后一个子标签的元素
  26. // 5.===============
  27. var ele = document.getElementsByName('haiyan')[0];
  28. var ele1 = ele.nextElementSibling;
  29. console.log(ele1) ; //下一个兄弟标签元素
  30. // 6.===============
  31. var ele = document.getElementsByName('haiyan')[0];
  32. var ele1 = ele.previousElementSibling;
  33. console.log(ele1) //上一个兄弟标签元素

4.节点操作

1)创建节点

  1. createElement(标签名):创建一个指定名称的标签;
  2. 例如:
  3. var tag = document.createElement("input");
  4. tag.setAttribute("type", "text");

2)添加节点

  1. 追加一个子节点(作为最后的子节点)
  2. somenode.appendChild(newnode);
  3. 把增加的节点放到某个节点的前面
  4. somenode.inserBefore(newnode, 某个节点);

3)删除节点

  1. removeChild():获得要删除的元素,通过父元素调用删除

4)替换节点

  1. somenode.replaceChild(newnode, 某个节点);

5)节点属性操作

  • 获取文本节点的值:innerText、innerHTML

    innerText:不管是赋值还是取值,只能识别纯文本;innerHTML:既可以识别纯文本,也可以识别标签;
  1. // 文本属性
  2. // 1.innerText:不管你是赋值还是取值,只能识别纯文本
  3. var a1 = document.getElementsByClassName('c2')[0];
  4. // console.log(a1);
  5. //取值操作
  6. console.log(a1.innerText); //你好吗/
  7. console.log(a1.innerHTML); //你好吗/
  8. //赋值操作
  9. a1.innerText='Egon';
  10. a1.innerHTML='<a href="">hello</a>';
  11. // 2.innerHtml:既可以识别纯文本,也可以识别标签
  12. var b1 = document.getElementsByClassName('c2')[1];
  13. // console.log(b1);
  14. //取值操作
  15. console.log(b1.innerText);
  16. console.log(b1.innerHTML);
  17. //赋值操作
  18. b1.innerText = 'lala';
  19. b1.innerHTML = '<input type="text">';
  • 属性(attribute)操作

    泛指所有的属性,getAttribute可以操作其他的,但是不可以操作class
  1. elementNode.setAttribute(name,value)
  2. elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML)
  3. elementNode.removeAttribute(“属性名”);
  1. <body><div class="c1" id="d1">DIV</div>
  2. <script>
  3. var ele = document.getElementsByClassName('c1')[0];
  4. ele.id='d2';//修改id
  5. console.log(ele);
  6. //取属性值 :
  7. // 方式一
  8. console.log(ele.getAttribute('id'));
  9. // 方式二
  10. console.log(ele.id);
  11. / 属性赋值
  12. // 方式一
  13. ele.setAttribute('id','d3');
  14. console.log(ele);
  15. // 方式二
  16. ele.id = 'd3';
  17. console.log(ele);
  • value获取当前选中的value值

    input

    select(selectIndex)

    textarea

  • 关于class的操作

  1. // class属性=============
  2. var ele = document.getElementsByClassName('c1')[0];
  3. console.log(ele.className); //打印类的名字
  4. ele.classList.add('hide');
  5. console.log(ele); //<div class="c1 hide" id="d1">
  6. ele.classList.remove('hide');//吧添加的remove移除了
  7. console.log(ele)
  • 改变css样式
  1. // 如需改变 HTML 元素的样式,请使用这个语法
  2. document.getElementById(id).style.property=新样式
  1. 下面这个例子会改变<p>元素的样式
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>JavaScript DOM 改变CSS样式</title>
  7. </head>
  8. <body>
  9. <p id="p1">Hello World!</p>
  10. <p id="p2">Hello World!</p>
  11. <script>
  12. document.getElementById("p2").style.color="blue";
  13. document.getElementById("p2").style.fontFamily="Arial";
  14. document.getElementById("p2").style.fontSize="larger";
  15. </script>
  16. <p>以上段落通过脚本修改。</p>
  17. </body>
  18. </html>

三、DOM Event(事件)

1.事件类型

  1. onclick 当用户点击某个对象时调用的事件句柄。
  2. ondblclick 当用户双击某个对象时调用的事件句柄。
  3. onfocus 元素获得焦点。 练习:输入框
  4. onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
  5. onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)
  6. onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
  7. onkeypress 某个键盘按键被按下并松开。
  8. onkeyup 某个键盘按键被松开。
  9. onload 一张页面或一幅图像完成加载。
  10. onmousedown 鼠标按钮被按下。
  11. onmousemove 鼠标被移动。
  12. onmouseout 鼠标从某元素移开。
  13. onmouseover 鼠标移到某元素之上。
  14. onmouseleave 鼠标从元素离开
  15. onselect 文本被选中。
  16. onsubmit 确认按钮被点击

2.绑定方式

方式一

  1. <!--绑定事件的方式一-->
  2. <div onclick="foo(this)">div</div>
  3. <div class="c1">div2</div>
  4. <script>
  5. function foo(self) {
  6. console.log(self); //<div onclick="foo(this)" style="color: red;">
  7. self.style.color = 'red';
  8. }

方式二

  1. //方式二
  2. // 事件的绑定方式2:标签对象.on事件 = function (){}
  3. var ele=document.getElementsByClassName("c1")[0];
  4. ele.onclick=function () {
  5. console.log(this); // this 代指: 当前触发时间的标签对象;
  6. this.style.fontSize="30px"
  7. }

3.onload事件

onload事件开发中,只给body元素加。这个事件的触发标志着页面内容被加载完成,应用场景:当有些事情我们希望页面加载完成立刻执行,就可以使用该事件(什么时候加载完,什么时候触发)

  1. // onload事件:基于节点操作的修改
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>节点操作</title>
  7. <style>
  8. .c1 {
  9. width: 300px;
  10. height: 200px;
  11. border: 1px solid red;
  12. }
  13. </style>
  14. <script>
  15. //如果要把script写在body的上面就可以用onload事件
  16. //onload什么时候加载完什么时候触发这个事件
  17. window.onload = function () {
  18. var ele_add = document.getElementsByClassName('addBtn')[0];
  19. var ele_del = document.getElementsByClassName('delBtn')[0];
  20. var ele_repleace = document.getElementsByClassName('replaceBtn')[0];
  21. console.log(ele_add);
  22. //绑定的添加节点的事件
  23. ele_add.onclick = function () {
  24. //先创建一个标签
  25. var ele_a = document.createElement('a');
  26. console.log(ele_a); //<a></a>
  27. ele_a.innerHTML = '点击'; //<a>点击</a>
  28. ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>点击</a>
  29. //先创建一个标签
  30. var ele_img = document.createElement('img');
  31. ele_img.src = '1.png';
  32. ele_img.width = 50;
  33. ele_img.height = 50;
  34. //找到父标签
  35. var ele_parent = document.getElementsByClassName('c1')[0];
  36. //然后添加
  37. ele_parent.appendChild(ele_a);
  38. ele_parent.appendChild(ele_img);
  39. };
  40. //绑定的删除节点的事件
  41. ele_del.onclick = function () {
  42. //先获取要删除的元素
  43. var ele_p = document.getElementById('p1');
  44. //获取它的父元素
  45. var ele_parent = document.getElementsByClassName('c1')[0];
  46. //然后删除(注意是父元素删除子元素)
  47. ele_parent.removeChild(ele_p)
  48. };
  49. //绑定的替换节点的事件
  50. ele_repleace.onclick = function () {
  51. //找被替换的标签(旧标签)
  52. var ele_p = document.getElementById('p2');
  53. //创建一个替换后的标签(新标签)
  54. var ele_img = document.createElement('img');
  55. ele_img.src = '2.png';
  56. ele_img.width = 100;
  57. ele_img.height = 50;
  58. //找到父节点
  59. var ele_parent = document.getElementsByClassName('c1')[0];
  60. //做替换(父节点替换子节点中的某一个节点):相当于一次删除加一次添加
  61. ele_parent.replaceChild(ele_img, ele_p);
  62. };
  63. //表格绑定删除节点的事件
  64. var ele_dels = document.getElementsByClassName('delbtn');
  65. for (var i = 0; i < ele_dels.length; i++) {
  66. ele_dels[i].onclick = function () {
  67. //获取删除的元素
  68. var ele_tr = this.parentElement.parentElement;
  69. // console.log(ele_tr)
  70. //找到父节点
  71. var ele_tbody_parent = document.getElementById('t1');
  72. //然后删除
  73. ele_tbody_parent.removeChild(ele_tr)
  74. }
  75. }
  76. }
  77. </script>
  78. </head>
  79. <body>
  80. <div class="c1">
  81. <p id="p1">年后</p>
  82. <p id="p2">hello</p>
  83. </div>
  84. <button class="addBtn">ADD</button>
  85. <button class="delBtn">DEL</button>
  86. <button class="replaceBtn">Replace</button>
  87. <ul>
  88. <li>创建节点:var ele_a = document.createElement('a');</li>
  89. <li>添加节点:ele_parent.appendChild(ele_img);</li>
  90. <li>删除节点:ele_parent.removeChild(ele_p);</li>
  91. <li>替换节点:ele_parent.replaceChild(新标签,旧标签);</li>
  92. </ul>
  93. <table border="1">
  94. <tbody id="t1">
  95. <tr>
  96. <td><input type="checkbox"></td>
  97. <td><input type="text"></td>
  98. <td>
  99. <button class="delbtn">del1</button>
  100. </td>
  101. </tr>
  102. <tr>
  103. <td><input type="checkbox"></td>
  104. <td><input type="text"></td>
  105. <td>
  106. <button class="delbtn">del2</button>
  107. </td>
  108. </tr>
  109. <tr>
  110. <td><input type="checkbox"></td>
  111. <td><input type="text"></td>
  112. <td>
  113. <button class="delbtn">del3</button>
  114. </td>
  115. </tr>
  116. <tr>
  117. <td><input type="checkbox"></td>
  118. <td><input type="text"></td>
  119. <td>
  120. <button class="delbtn">del4</button>
  121. </td>
  122. </tr>
  123. </tbody>
  124. </table>
  125. </body>
  126. </html>
  1. // onload实例二
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Title</title>
  7. <script>
  8. /*
  9. window.onload=function(){
  10. var ele=document.getElementById("ppp");
  11. ele.onclick=function(){
  12. alert(123)
  13. };
  14. };
  15. */
  16. function fun() {
  17. var ele=document.getElementById("ppp");
  18. ele.onclick=function(){
  19. alert(123)
  20. };
  21. }
  22. </script>
  23. </head>
  24. <body onload="fun()">
  25. <p id="ppp">hello p</p>
  26. </body>
  27. </html>

4.onkeydown事件

Event对象代表事件的状态,比如事件在其发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会再事件发生前被执行。event对象在事件发生时系统已经创建好了,并且在事件函数被调用时传给事件函数,我们获取仅仅只需要接手一下即可。比如:onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就是keycode:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="text" class="test">
  9. <input type="text" id="t1"/>
  10. <script>
  11. //测试event对象
  12. var ele = document.getElementsByClassName('test')[0];
  13. // event :每次触发事件时所有的状态信息
  14. // event.keyCode :保存着所有的状态信息
  15. ele.onkeydown =function (event) {
  16. // onkeydown按下键盘触发的事件
  17. console.log(event);
  18. console.log(event.keyCode);
  19. if (event.keyCode==13){
  20. //按回车就会弹出
  21. alert(666)
  22. }
  23. }
  24. </script>
  25. <script type="text/javascript">
  26. var ele=document.getElementById("t1");
  27. ele.onkeydown=function(e){
  28. e=e||window.event;
  29. var keynum=e.keyCode;
  30. var keychar=String.fromCharCode(keynum);
  31. // console.log(keynum); //每次键盘敲下的状态信息
  32. // console.log(keychar); //输入的字符
  33. // alert(keynum);
  34. // alert(keychar) //你键盘输入的字符
  35. };
  36. </script>
  37. </body>
  38. </html>

5.onsubmit事件

当表单再提交时触发,该事件也只能给form表单使用。应用场景:在表单提交验证用户输入是否正确,如果验证失败,在该方法中,我们应该阻止表单的提交:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>onsubmit事件</title>
  6. <!--onsubmit事件:确定按钮被点击-->
  7. <!--在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.-->
  8. <!--提交按钮本身就有一个默认事件(你点击提交的时候就会把数据发过去)-->
  9. </head>
  10. <body>
  11. <form action="" id="submit">
  12. <p>姓名:<input type="text" class="name"></p>
  13. <p>年龄:<input type="text" class="age"></p>
  14. <input type="submit">
  15. </form>
  16. <input type="text" class="test">
  17. <script>
  18. var ele_form = document.getElementById('submit');
  19. var ele_name = document.getElementsByClassName('name')[0];
  20. var ele_age = document.getElementsByClassName('age')[0];
  21. ele_form.onsubmit = function (event) {
  22. var username = ele_name.value;
  23. var age = ele_age.value;
  24. alert(username);
  25. alert(age);
  26. if (username=='haiyan'){
  27. //阻止默认事件的两种方式
  28. // 方式一:
  29. // return false;
  30. // 方式二
  31. // 给函数给一个形参,这个形参写什么都行,一般我们写成event
  32. event.preventDefault() //阻止默认事件(表单的提交)
  33. }
  34. }
  35. </script>
  36. <script>
  37. //测试event对象
  38. var ele = document.getElementsByClassName('test')[0];
  39. // event :每次触发事件时所有的状态信息
  40. // event.keyCode :保存着所有的状态信息
  41. ele.onkeydown =function (event) {
  42. // onkeydown按下键盘触发的事件
  43. console.log(event);
  44. console.log(event.keyCode);
  45. if (event.keyCode==13){
  46. //按回车就会弹出
  47. alert(666)
  48. }
  49. }
  50. </script>
  51. </body>
  52. </html>

6.事件传播

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>事件传播</title>
  6. <style>
  7. .box1 {
  8. width: 300px;
  9. height: 300px;
  10. background-color: rebeccapurple;
  11. }
  12. .box2{
  13. width: 150px;
  14. height: 150px;
  15. background-color: yellow;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="box1">
  21. <div class="box2"></div>
  22. </div>
  23. <script>
  24. //因为盒子1是盒子2的父亲,所以当给父亲绑定一个事件,给儿子也绑定一个事件,就像
  25. // 继承一样,儿子会继承父亲的事件,所以现在运行的时候如果点击盒子2,会把自己的是事件和
  26. // 父亲的事件都执行了。所以如果只想让儿子执行自己的事件,那么就得阻止发生事件传播
  27. var ele1 = document.getElementsByClassName('box1')[0];
  28. var ele2 = document.getElementsByClassName('box2')[0];
  29. ele1.onclick = function () {
  30. alert(123)
  31. };
  32. ele2.onclick = function (event) {
  33. alert(456);
  34. console.log(event);
  35. console.log(event.keyCode);
  36. // 阻止事件传播的方式
  37. event.stopPropagation();
  38. };
  39. </script>
  40. </body>
  41. </html>

7.search实例

模拟placeholder属性的功能,placeholder和value的区别:

  • placeholder:只是一个提示功能,不传值;
  • value:是一个默认的值,如果输入框中不写数据时,它会将默认的数据发送出去
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>模拟placeholder属性的功能</title>
  6. </head>
  7. <body>
  8. <input type="text" placeholder="username" id="submit">
  9. <input type="text" value="username" id="submit1">
  10. <script>
  11. // var ele = document.getElementById('submit1');
  12. var ele = document.getElementById('submit1');
  13. ele.onfocus = function () {
  14. //先获取焦点,点击输入框就获取到焦点,光标一上去就把值设成空
  15. this.value=""
  16. };
  17. ele.onblur = function () {
  18. // 当光标不点击那个输入框的时候就失去焦点了
  19. //当失去焦点的时候,判断当前的那个值是不是为空,是否含有空格
  20. // 如果为空或者有空格,用trim()去掉空格。然后赋值为username
  21. if (this.value.trim()==""){
  22. this.value='username'
  23. }
  24. }
  25. </script>
  26. </body>
  27. </html>

8.onchange事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>onchange事件</title>
  6. </head>
  7. <body>
  8. <select name="" id="s1">
  9. <option value="">甘肃省</option>
  10. <option value="">安徽省</option>
  11. <option value="">湖北省</option>
  12. </select>
  13. <script>
  14. var ele = document.getElementById('s1');
  15. //下拉菜单,和你当前事件不同的时候出发事件
  16. ele.onchange= function () {
  17. alert(123)
  18. }
  19. </script>
  20. </body>
  21. </html>
  1. // 使用onchange事件实现菜单二级联动
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>二级联动</title>
  7. </head>
  8. <body>
  9. <select name="" id="s1">
  10. <option value="">请选择省份</option>
  11. <option value="gansu">甘肃省</option>
  12. <option value="hebei">河北省</option>
  13. <option value="henan">河南省</option>
  14. </select>
  15. <select name="" id="c1">
  16. <option value="city">请选择城市</option>
  17. </select>
  18. <script>
  19. var data = {'gansu':['兰州市','天水市','武威市'],'hebei':['保定','石家庄'],'henan':['郑州','开封']}
  20. var ele_select = document.getElementById('s1');
  21. var ele_critys = document.getElementById('c1');//父亲标签
  22. ele_select.onchange =function () {
  23. // alert(123)
  24. // console.log(this.value)
  25. var ele_provice = this.value;
  26. var citys = data[ele_provice];
  27. console.log(citys);
  28. //要在没有添加之间清空,不然你点一次添加一次,点一次添加一次
  29. //方式一
  30. // ele_critys.children.length=1; //不可行。。但是原理和方式二的一样
  31. //方式二
  32. // ele_critys.options.length = 1; //留一个,一般多的是设成0了
  33. for (var i =0;i<citys.length;i++) {
  34. //创建一个option标签
  35. var ele_option = document.createElement('option'); //<option></option>
  36. ele_option.innerHTML = citys[i]; //得到有文本的option标签
  37. ele_option.value = i + 1; //设置属性值
  38. console.log(ele_option);
  39. ele_critys.appendChild(ele_option);
  40. }
  41. }
  42. </script>
  43. </body>
  44. </html>

9.onmouse事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>onmouse事件</title>
  6. <style>
  7. .box{
  8. width: 300%;
  9. height: 200px;
  10. }
  11. .title{
  12. background: steelblue;
  13. line-height: 40px;
  14. }
  15. .con{
  16. background: slategray;
  17. line-height: 30px;
  18. }
  19. .hide{
  20. display: none;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="box">
  26. <div class="title">onmouse</div>
  27. <div class="con hide">
  28. <div><a href="" class="item">你好吗?</a></div>
  29. <div><a href="" class="item">我好啊</a></div>
  30. <div><a href="" class="item">好就好呗</a></div>
  31. </div>
  32. </div>
  33. <script>
  34. var ele_title = document.getElementsByClassName('title')[0];
  35. var ele_box = document.getElementsByClassName('box')[0];
  36. //鼠标指上去的事件
  37. ele_title.onmouseover = function () {
  38. this.nextElementSibling.classList.remove('hide');
  39. };
  40. //鼠标移走的事件的两种方式
  41. // 方式一(推荐)
  42. ele_box.onmouseleave= function () {
  43. ele_title.nextElementSibling.classList.add('hide');
  44. };
  45. // 方式二
  46. // ele_title.onmouseout = function () {
  47. // this.nextElementSibling.classList.add('hide');
  48. // }
  49. // 方式一和方式二的区别:
  50. // 不同点
  51. // onmouseout:不论鼠标指针离开被选元素还是任何子元素,都会触发onmouseout事件
  52. // onmouseleave:只有在鼠标指针离开被选元素时,才会触发onmouseleave事件
  53. // 相同点:都是鼠标移走触发事件
  54. </script>
  55. </body>
  56. </html>

10.事件委派

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>事件委派(委派给所有的子元素)</title>
  6. </head>
  7. <body>
  8. <ul>
  9. <li>111</li>
  10. <li>222</li>
  11. <li>333</li>
  12. </ul>
  13. <button class="addbtn">点我添加</button>
  14. </body>
  15. <script>
  16. var ele_btn = document.getElementsByClassName('addbtn')[0];
  17. var ele_ul = document.getElementsByTagName('ul')[0];
  18. var ele_li =document.getElementsByTagName('li');
  19. //绑定事件
  20. for (var i=0;i<ele_li.length;i++){
  21. ele_li[i].onclick = function () {
  22. alert(this.innerHTML)
  23. }
  24. }
  25. //事件委派
  26. ele_btn.onclick = function () {
  27. //创建一个li标签
  28. var ele_li = document.createElement('li');
  29. // ele_li.innerHTML= 444;
  30. ele_li.innerText = Math.round(Math.random()*1000);
  31. ele_ul.appendChild(ele_li);//吧创建的li标签添加到ul标签
  32. ele_ul.addEventListener('click',function (e) {
  33. console.log(e.target); //当前点击的标签
  34. console.log(e.target.tagName);//拿到标签的名字 LI
  35. if (e.target.tagName=='LI'){
  36. console.log('ok');
  37. // alert(ele_li.innerHTML)
  38. }
  39. })
  40. }
  41. </script>
  42. </html>

四、节点操作

前面我们知道了JavaScript的属性操作,接下来了解一下节点操作,很重要!

创建节点:var ele= document.createElement("newnode");

增加节点:ele_parent.appendChild(ele_other);

删除节点:ele_parent.removeChild(ele_p);

替换节点:ele_parent.replaceChild(新标签,就标签);

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>节点操作</title>
  6. <style>
  7. .c1 {
  8. width: 300px;
  9. height: 200px;
  10. border: 1px solid red;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="c1">
  16. <p id="p1">年后</p>
  17. <p id="p2">hello</p>
  18. </div>
  19. <button class="addBtn">ADD</button>
  20. <button class="delBtn">DEL</button>
  21. <button class="replaceBtn">Replace</button>
  22. <ul>
  23. <li>创建节点:var ele_a = document.createElement('a');</li>
  24. <li>添加节点:ele_parent.appendChild(ele_img);</li>
  25. <li>删除节点:ele_parent.removeChild(ele_p);</li>
  26. <li>替换节点:ele_parent.replaceChild(新标签,旧标签);</li>
  27. </ul>
  28. <table border="1">
  29. <tbody id="t1">
  30. <tr>
  31. <td><input type="checkbox"></td>
  32. <td><input type="text"></td>
  33. <td><button class="delbtn">del1</button></td>
  34. </tr>
  35. <tr>
  36. <td><input type="checkbox"></td>
  37. <td><input type="text"></td>
  38. <td><button class="delbtn">del2</button></td>
  39. </tr>
  40. <tr>
  41. <td><input type="checkbox"></td>
  42. <td><input type="text"></td>
  43. <td><button class="delbtn">del3</button></td>
  44. </tr>
  45. <tr>
  46. <td><input type="checkbox"></td>
  47. <td><input type="text"></td>
  48. <td><button class="delbtn">del4</button></td>
  49. </tr>
  50. </tbody>
  51. </table>
  52. <script>
  53. var ele_add = document.getElementsByClassName('addBtn')[0];
  54. var ele_del = document.getElementsByClassName('delBtn')[0];
  55. var ele_repleace = document.getElementsByClassName('replaceBtn')[0];
  56. console.log(ele_add);
  57. //绑定的添加节点的事件
  58. ele_add.onclick = function () {
  59. //先创建一个标签
  60. var ele_a = document.createElement('a');
  61. console.log(ele_a); //<a></a>
  62. ele_a.innerHTML = '点击'; //<a>点击</a>
  63. ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>点击</a>
  64. //先创建一个标签
  65. var ele_img = document.createElement('img');
  66. ele_img.src = '1.png';
  67. ele_img.width = 50;
  68. ele_img.height = 50;
  69. //找到父标签
  70. var ele_parent = document.getElementsByClassName('c1')[0];
  71. //然后添加
  72. ele_parent.appendChild(ele_a);
  73. ele_parent.appendChild(ele_img);
  74. };
  75. //绑定的删除节点的事件
  76. ele_del.onclick = function () {
  77. //先获取要删除的元素
  78. var ele_p = document.getElementById('p1');
  79. //获取它的父元素
  80. var ele_parent = document.getElementsByClassName('c1')[0];
  81. //然后删除(注意是父元素删除子元素)
  82. ele_parent.removeChild(ele_p)
  83. };
  84. //绑定的替换节点的事件
  85. ele_repleace.onclick = function () {
  86. //找被替换的标签(旧标签)
  87. var ele_p = document.getElementById('p2');
  88. //创建一个替换后的标签(新标签)
  89. var ele_img = document.createElement('img');
  90. ele_img.src = '2.png';
  91. ele_img.width = 100;
  92. ele_img.height = 50;
  93. //找到父节点
  94. var ele_parent = document.getElementsByClassName('c1')[0];
  95. //做替换(父节点替换子节点中的某一个节点):相当于一次删除加一次添加
  96. ele_parent.replaceChild(ele_img, ele_p);
  97. }
  98. </script>
  99. <script>
  100. //绑定删除节点的事件
  101. var ele_dels = document.getElementsByClassName('delbtn');
  102. for(var i=0;i<ele_dels.length;i++){
  103. ele_dels[i].onclick = function () {
  104. //获取删除的元素
  105. var ele_tr = this.parentElement.parentElement;
  106. // console.log(ele_tr)
  107. //找到父节点
  108. var ele_tbody_parent =document.getElementById('t1');
  109. //然后删除
  110. ele_tbody_parent.removeChild(ele_tr)
  111. }
  112. }
  113. </script>
  114. </body>
  115. </html>

五、JavaScript DOM总结

1.JavaScript中for循环遍历,for循环遍历有两种:

  • 有条件遍历,例如:for(var i=0;i<ele.length;i++){}
  • for(var ele in ele_list){}
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script>
  9. var arr = [11,22,33,44,55];
  10. var obj = {'username':'zzz','agr':20}; //js中的这个类似字典的不叫字典,而是一个对象
  11. for (var i in obj){
  12. console.log(i); //拿到的是键
  13. console.log(obj[i]); //值
  14. }
  15. for (var j in arr){
  16. console.log(j); //拿到索引
  17. console.log(arr[j]); //拿到值
  18. }
  19. </script>
  20. </body>
  21. </html>

2.获取value属性值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>获取value值</title>
  6. </head>
  7. <body>
  8. <input type="text" id="c1">
  9. <select name="pro" id="s1">
  10. <option value="1">河北省</option>
  11. <option value="2">河南省</option>
  12. <option value="3">北京省</option>
  13. </select>
  14. <button>show</button>
  15. <script>
  16. var ele_button=document.getElementsByTagName("button")[0];
  17. ele_button.onclick=function () {
  18. var ele_input=document.getElementById("c1");
  19. var ele_select=document.getElementById("s1");
  20. console.log(ele_select.value)
  21. };
  22. </script>
  23. </body>
  24. </html>

3.表格示例(全选,反选,取消)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>表格示例</title>
  6. </head>
  7. <body>
  8. <button class="select">全选</button>
  9. <button class="reserve">反选</button>
  10. <button class="cancel">取消</button>
  11. <table border="1">
  12. <tr>
  13. <td><input type="checkbox" class="check"></td>
  14. <td>111</td>
  15. <td>222</td>
  16. <td>333</td>
  17. </tr>
  18. <tr>
  19. <td><input type="checkbox" class="check"></td>
  20. <td>111</td>
  21. <td>222</td>
  22. <td>333</td>
  23. </tr>
  24. <tr>
  25. <td><input type="checkbox" class="check"></td>
  26. <td>111</td>
  27. <td>222</td>
  28. <td>333</td>
  29. </tr>
  30. <tr>
  31. <td><input type="checkbox" class="check"></td>
  32. <td>111</td>
  33. <td>222</td>
  34. <td>333</td>
  35. </tr>
  36. </table>
  37. <script>
  38. // 方式一:分别给每个button增加事件
  39. var ele_select = document.getElementsByClassName('select')[0];
  40. var ele_reserve = document.getElementsByClassName('reserve')[0];
  41. var ele_cancel = document.getElementsByClassName('cancel')[0];
  42. var ele_input = document.getElementsByClassName('check');
  43. //全选
  44. ele_select.onclick = function () {
  45. for (var i = 0; i < ele_input.length; i++) {
  46. //添加一个checked属性
  47. ele_input[i].checked = 'checked'
  48. }
  49. };
  50. //取消
  51. ele_cancel.onclick = function () {
  52. for (var i =0;i<ele_input.length;i++){
  53. //删除checked属性,直接设置为空就行了
  54. ele_input[i].checked = ''
  55. }
  56. };
  57. //反选
  58. ele_reserve.onclick = function () {
  59. for (var i = 0; i < ele_input.length; i++) {
  60. var ele = ele_input[i];
  61. if (ele.checked) {//如果选中了就设置checked为空
  62. ele.checked = '';
  63. }
  64. else {//如果没有就设置checked = checked
  65. ele.checked = 'checked';
  66. }
  67. }
  68. };
  69. //方式二:方式一的优化循环增加事件
  70. // var ele_button = document.getElementsByTagName('button');
  71. // var ele_input = document.getElementsByClassName('check');
  72. // for(var i=0;i<ele_button.length;i++) {
  73. // ele_button[i].onclick = function () {
  74. // if (this.innerHTML == '全选') {
  75. // for (var i = 0; i < ele_input.length; i++) {
  76. // //添加一个checked属性
  77. // ele_input[i].checked = 'checked'
  78. // }
  79. // }
  80. // else if (this.innerHTML == '取消') {
  81. // for (var i = 0; i < ele_input.length; i++) {
  82. // //删除checked属性,直接设置为空就行了
  83. // ele_input[i].checked = ''
  84. // }
  85. // }
  86. // else {
  87. // for (var i = 0; i < ele_input.length; i++) {
  88. // var ele = ele_input[i];
  89. // if (ele.checked) {//如果选中了就设置checked为空
  90. // ele.checked = '';
  91. // }
  92. // else {//如果没有就设置checked = checked
  93. // ele.checked = 'checked';
  94. // }
  95. // }
  96. // }
  97. // }
  98. // }
  99. </script>
  100. </body>
  101. </html>

4.模态对话框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .back{
  8. background-color: white;
  9. height: 2000px;
  10. }
  11. .shade{
  12. position: fixed;
  13. top: 0;
  14. bottom: 0;
  15. left:0;
  16. right: 0;
  17. background-color: grey;
  18. opacity: 0.4;
  19. }
  20. .hide{
  21. display: none;
  22. }
  23. .models{
  24. position: fixed;
  25. top: 50%;
  26. left: 50%;
  27. margin-left: -100px;
  28. margin-top: -100px;
  29. height: 200px;
  30. width: 200px;
  31. background-color: wheat;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="back">
  37. <input class="c" type="button" value="click">
  38. </div>
  39. <div class="shade hide handles"></div>
  40. <div class="models hide handles">
  41. <input class="c" type="button" value="cancel">
  42. </div>
  43. <script>
  44. var eles=document.getElementsByClassName("c");
  45. var handles=document.getElementsByClassName("handles");
  46. for(var i=0;i<eles.length;i++){
  47. eles[i].onclick=function(){
  48. if(this.value=="click"){
  49. for(var j=0;j<handles.length;j++){
  50. handles[j].classList.remove("hide");
  51. }
  52. }
  53. else {
  54. for(var j=0;j<handles.length;j++){
  55. handles[j].classList.add("hide");
  56. }
  57. }
  58. }
  59. }
  60. </script>
  61. </body>
  62. </html>

5.搜索框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>模拟placeholder属性的功能</title>
  6. </head>
  7. <body>
  8. <input type="text" placeholder="username" id="submit">
  9. <input type="text" value="username" id="submit1">
  10. <script>
  11. // var ele = document.getElementById('submit1');
  12. var ele = document.getElementById('submit1');
  13. ele.onfocus = function () {
  14. //先获取焦点,点击输入框就获取到焦点,光标一上去就把值设成空
  15. this.value=""
  16. };
  17. ele.onblur = function () {
  18. // 当光标不点击那个输入框的时候就失去焦点了
  19. //当失去焦点的时候,判断当前的那个值是不是为空,是否含有空格
  20. // 如果为空或者有空格,用trim()去掉空格。然后赋值为username
  21. if (this.value.trim()==""){
  22. this.value='username'
  23. }
  24. }
  25. </script>
  26. </body>
  27. </html>

6.tab切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>tab</title>
  6. <style>
  7. *{margin:0; padding:0; list-style:none;}
  8. body{
  9. font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
  10. }
  11. h3{
  12. text-align: center;
  13. color:darkcyan;
  14. margin-top: 30px;
  15. letter-spacing: 5px;
  16. }
  17. .box{
  18. width: 1000px;
  19. margin:50px auto 0px;
  20. }
  21. #title{
  22. line-height: 40px;
  23. background-color: rgb(247,247,247);
  24. font-size: 16px;
  25. font-weight: bold;
  26. color: rgb(102,102,102);
  27. }
  28. #title span{
  29. float: left;
  30. width: 166px;
  31. text-align: center;
  32. }
  33. #title span:hover{
  34. /*color: black;*/
  35. cursor: pointer;
  36. }
  37. #content{
  38. margin-top: 20px;
  39. }
  40. #content li{
  41. width: 1050px;
  42. display: none;
  43. background-color: rgb(247,247,247);
  44. }
  45. #content li div{
  46. width: 156px;
  47. margin-right: 14px;
  48. float: left;
  49. text-align: center;
  50. }
  51. #content li div a{
  52. font-size: 14px;
  53. color: black;
  54. line-height: 14px;
  55. /* float: left;*/
  56. display: inline-block;
  57. margin-top: 10px;
  58. }
  59. #content li a:hover{
  60. color: #B70606;
  61. }
  62. #content li div span{
  63. font-size: 16px;
  64. line-height: 16px;
  65. /*float: left;*/
  66. display: block;
  67. color: rgb(102,102,102);
  68. margin-top: 10px;
  69. }
  70. #content img{
  71. float: left;
  72. width: 155px;
  73. height: 250px;
  74. }
  75. #title .select{
  76. background-color: #2459a2;
  77. color: white;
  78. border-radius: 10%;
  79. }
  80. #content .show{
  81. display: block;
  82. }
  83. .show span{
  84. color: red!important;
  85. font-size: 30px;
  86. }
  87. </style>
  88. </head>
  89. <body>
  90. <h3 id="wel">京东商城欢迎您</h3>
  91. <!-- direction="right up down left" -->
  92. <!-- behavior:滚动方式(包括3个值:scroll、slide、alternate) -->
  93. <!-- 说明:scroll:循环滚动,默认效果;slide:只滚动一次就停止;alternate:来回交替进行滚动。 -->
  94. <!-- scrollamount="5" 滚动速度 -->
  95. <marquee behavior="scroll" direction="right">欢迎海燕来访</marquee>
  96. <script>
  97. function test(){
  98. var mywel = document.getElementById("wel");
  99. var content = mywel.innerText;
  100. var f_content = content.charAt(0);
  101. var l_content = content.substring(1,content.length);
  102. var new_content = l_content + f_content;
  103. mywel.innerText = new_content;
  104. }
  105. // setInterval("test();", 500);
  106. </script>
  107. <div class="box">
  108. <p id="title">
  109. <span class="select">家用电器</span>
  110. <span>家具</span>
  111. <span>汽车</span>
  112. <span>食品</span>
  113. <span>女鞋</span>
  114. <span>医疗保健</span>
  115. </p>
  116. <ul id="content">
  117. <li class="show">
  118. <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>
  119. <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣机"><a href="#">海尔洗衣机</a><span>价格:5400</span></div>
  120. <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="电饭煲"><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>
  121. <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能电视"><a href="#">三星智能电视</a><span>价格:8999</span></div>
  122. <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="净水器"><a href="#">净水器</a><span>价格:1300</span></div>
  123. <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空气净化器"><a href="#">空气净化器</a><span>价格:5300</span></div>
  124. </li>
  125. <li>
  126. <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
  127. <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
  128. <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
  129. <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
  130. <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
  131. <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
  132. </li>
  133. <li>
  134. <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
  135. <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
  136. <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
  137. <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
  138. <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
  139. <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
  140. </li>
  141. <li>
  142. <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
  143. <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
  144. <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
  145. <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
  146. <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
  147. <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
  148. </li>
  149. <li>
  150. <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
  151. <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
  152. <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
  153. <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
  154. <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
  155. <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
  156. </li>
  157. <li>
  158. <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
  159. <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
  160. <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
  161. <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
  162. <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
  163. <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
  164. </li>
  165. </ul>
  166. </div>
  167. <script>
  168. var title=document.getElementById('title');
  169. var content=document.getElementById('content');
  170. var category=title.getElementsByTagName('span');
  171. var item=content.getElementsByTagName('li');
  172. for (var i = 0; i < category.length; i++) {
  173. category[i].index=i;
  174. category[i].onclick=function(){
  175. for (var j = 0; j < category.length; j++) {
  176. category[j].className='';
  177. item[j].className='';
  178. }
  179. this.className='select';
  180. item[this.index].className='show';
  181. }
  182. }
  183. </script>
  184. </body>
  185. </html>

7.作用域链

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>作用链域</title>
  6. </head>
  7. <body>
  8. <script>
  9. var s = 12;
  10. function f() {
  11. console.log(s); //undefined
  12. var s=12;
  13. console.log(s);//12
  14. }
  15. f();
  16. </script>
  17. </body>
  18. </html>

8.JavaScript 作用域

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

  • 全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域:(1)最外层函数和在最外层函数外定义的变量拥有全局作用域

  1. var name="yuan";
  2. function foo(){
  3. var age=23;
  4. function inner(){
  5. console.log(age);
  6. }
  7. inner();
  8. }
  9. console.log(name); // yuan
  10. //console.log(age); // Uncaught ReferenceError: age is not defined
  11. foo(); // 23
  12. inner(); // Uncaught ReferenceError: inner is not defined

(2)所有未定义直接赋值的变量自动声明为拥有全局作用域

  1. var name="yuan";
  2. function foo(){
  3. age=23;
  4. var sex="male"
  5. }
  6. foo();
  7. console.log(age); // 23
  8. console.log(sex); // sex is not defined

变量age拥有全局作用域,而sex在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都拥有全局作用域,例如:window.alert(),window.location,window.top等。

  • 局部作用域(Local Scope)

    和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所以在某些地方这种作用域被称为函数作用域。

  • 作用域链(Scope Chain)

    在JavaScript中,函数也是对象,实际上JavaScript中一切都是对象。函数对象和其他对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是Scope,由ECMA-262标准定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

  1. //-----**********************例1*********************************
  2. var s=12;
  3. function f(){
  4. console.log(s);
  5. var s=12; // if s=12
  6. console.log(s)
  7. }
  8. f();
  9. //-----**********************例2*********************************
  10. var s=10;
  11. function foo(){
  12. console.log(s);
  13. var s=5;
  14. console.log(s);
  15. function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作
  16. console.log(s);
  17. }
  18. foo();
  19. //-----***********************例3********************************
  20. function bar(age) {
  21. console.log(age);
  22. var age = 99;
  23. var sex= 'male';
  24. console.log(age);
  25. function age() {
  26. alert(123)
  27. };
  28. console.log(age);
  29. return 100;
  30. }
  31. result=bar(5);
  32. //-----********************************************************

结果分析

这里我们以例3来分析整个过程:当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图:

解析到函数调用时,即bar(5),会生成一个active object的对象,该对象包含了函数所有的局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的顶端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图:

过程解析:

  1. function bar(age) {
  2. console.log(age);
  3. var age = 99;
  4. var sex="male";
  5. console.log(age);
  6. function age(){
  7. alert(123);
  8. } ;
  9. console.log(age);
  10. return 100;
  11. }
  12. result=bar(5);
  13. 词法分析过程(涉及参数,局部变量声明,函数声明表达式):
  14. 1-1 、分析参数,有一个参数,形成一个 AO.age=undefine;
  15. 1-2 、接收参数 AO.age=5;
  16. 1-3 、分析变量声明,有一个 var age, 发现 AO 上面有一个 AO.age ,则不做任何处理
  17. 1-4 、分析变量声明,有一个 var sex,形成一个 AO.sex=undefine;
  18. 1-5 、分析函数声明,有一个 function age(){} 声明, 则把原有的 age 覆盖成 AO.age=function(){};
  19. 执行过程:
  20. 2-1 、执行第一个 console.log(age) 时,当前的 AO.age 是一个函数,所以输出的一个函数
  21. 2-2 、这句 var age=99; 是对不 AO.age 的属性赋值, AO.age=99 ,所以在第二个输出的age 99;
  22. 2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。
  23. 注意:执行阶段:
  24. function age(){
  25. alert(123)
  26. } ;
  27. 不进行任何操作,将执行语句复制给age这部操作是在词法分析时,即运行前完成的。

前端基础:JavaScript DOM对象的更多相关文章

  1. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  2. 进击的Python【第十五章】:Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  3. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  5. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  6. 前端基础-JavaScript

    转载地址:http://www.cnblogs.com/yuanchenqi/articles/6893904.html 一.Javascript结构   ECMAScript  ECMAScript ...

  7. 前端基础----JavaScript基础

    一.JavaScript概述 1,JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...

  8. 前端基础-JavaScript的基本概述和语法

    1.JavaScript概述 2.JavaScript引入方式 3.JavaScript语言规范 4.JavaScript语言基础 5.JavaScript数据类型 6.JavaScript运算符 7 ...

  9. 前端基础JavaScript

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

随机推荐

  1. cv::Mat转换QImage

    cvtColor(img, img, CV_BGR2RGB); QImage image((uchar*)img.data,img.cols,img.rows,QImage::Format_RGB88 ...

  2. day2 Opencv + image

    [参考网站]http://backyardlife.duapp.com/duan/ 1.目标: 读入一幅图像,怎样显示一幅图像,以及如何保存一幅图像 cv2.imread(),cv2.imshow() ...

  3. LVS入门篇(五)之LVS+Keepalived实战

    一.实验架构和环境说明 (1)本次基于VMware Workstation搭建一个四台Linux(CentOS 7.4)系统所构成的一个服务器集群,其中两台负载均衡服务器(一台为主机,另一台为备机), ...

  4. cdh中hdfs非ha环境迁移Namenode与secondaryNamenode,从uc机器到阿里;

    1.停掉外部接入服务: 2 NameNode Metadata备份: 2.1 备份fsimage数据,(该操作适用HA和非HA的NameNode),使用如下命令进行备份: [root@cdh01 df ...

  5. python 布尔值 bool( ) 与逻辑运算符

    逻辑运算符 not and or 运算符优先级 not > and >or printer(x or y)  x为非零,则返回x,否则返回y print(1 or 2) print(3 o ...

  6. Yii 2.0 使用片段缓存

    网站首页footer中的菜单标题是从数据库读取并显示处理的. 也就是 <footer>标题里面是foreach.这样每个人打开网站就查询遍历效率会很低. <footer class= ...

  7. NO.02---聊聊Vue提升

    如果本篇有看不明白的地方,请翻阅上一篇文章 上一篇我们讲了如何通过一些简单的动作来改变 store.js 中的数据对象,在实际工作中,这是完全无法满足工作需求的,所以这篇我们来说说如何做一些简单的流程 ...

  8. 优先队列(堆) -数据结构(C语言实现)

    数据结构与算法分析 优先队列 模型 Insert(插入) == Enqueue(入队) DeleteMin(删除最小者) == Dequeue(出队) 基本实现 简单链表:在表头插入,并遍历该链表以删 ...

  9. Python中如何实现im2col和col2im函数(sliding类型)

    今天来说说im2col和col2im函数,这是MATLAB中两个内置函数,经常用于数字图像处理中.其中im2col函数在<MATLAB中的im2col函数>一文中已经进行了简单的介绍. 一 ...

  10. windows更改MySQL存储路径

    在C:\ProgramData\MySQL\MySQL Server 5.7文件夹 my.ini是默认的配置文件.在这里我们只更改数据存储路径.不更改配置文件 1 # Path to the data ...