一：DOM节点

子节点：childNodes

父节点：parentNode

offsetPrent

二：元素属性操作

方式一：xxx.style.xxx

方式二：xxx.style["xxx"]

方式三：Dom方式

（一）获取子节点的数量  chileNodes.length

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>节点</title>
  8.  
  9.     <script>
  10.  
  11.     window.onload = function(){
  12.  
  13.         var oUl = document.getElementsByTagName("ul")[0];
  14.         var oLi = oUl.getElementsByTagName("li");
  15.         alert(oUl.childNodes.length)
  16.  
  17.     }
  18.     </script>
  19. </head>
  20. <body>
  21.     <ul>
  22.         <li></li>
  23.         <li></li>
  24.         <li></li>
  25.         <li></li>
  26.         <li></li>
  27.     </ul>
  28. </body>
  29. </html>

错误：明明是5个，结果是11个。

原因是：chrome浏览器将li前面和后面的空白也当成节点，进行计算，因为 xxxxx是文本节点，<li>xxx</li>是元素节点

解决办法：使用children就行：oUl.childNodes.length 改为 oUl.children.length

案例：通过js给下面的li设置颜色，红绿相间

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>节点</title>
  8.  
  9.     <script>
  10.  
  11.     window.onload = function(){
  12.  
  13.         var oUl = document.getElementsByTagName("ul")[0];
  14.         var oLi = oUl.getElementsByTagName("li");
  15.  
  16.        for(var i=0;i<oUl.children.length;i++){
  17.            if(i%2===0){
  18.                 oUl.children[i].style.backgroundColor = "red";
  19.            }else{
  20.                 oUl.children[i].style.backgroundColor = "green";
  21.            }
  22.        }
  23.     }
  24.     </script>
  25. </head>
  26. <body>
  27.     <ul>
  28.         <li></li>
  29.         <li></li>
  30.         <li></li>
  31.         <li></li>
  32.         <li></li>
  33.     </ul>
  34. </body>
  35. </html>

nodeType可以告诉节点的类型  如果非要使用childNode进行设置，可以增加判断，if (nodeType==1) 表示元素节点，通过这个可以过滤节点

（二）获取父节点

案例：循环设置点击事件，隐藏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>节点</title>
  8.  
  9.     <script>
  10.  
  11.     window.onload = function(){
  12.  
  13.         var oUl = document.getElementsByTagName("ul")[0];
  14.         // [object HTMLBodyElement]
  15.         // alert(oUl.parentNode)
  16.         // var oLi = oUl.getElementsByTagName("li")
  17.         // [object HTMLUListElement]
  18.         // alert(oLi[0].parentNode)
  19.         var oA = oUl.getElementsByTagName("a")
  20.         for(var i=0;i<oA.length;i++){
  21.             oA[i].onclick = function(){
  22.             // 这种情况就无法隐藏，因为是事件，this就代表当前点击的元素，谁点击，发生了事件，this就代表谁
  23.             //    oA[i].parentNode.style.display = "none"
  24.                this.parentNode.style.display = "none"
  25.             }
  26.         }
  27.     }
  28.     </script>
  29. </head>
  30. <body>
  31.     <ul>
  32.         <li><a href="#">隐藏1</a></li>
  33.         <li><a href="#">隐藏2</a></li>
  34.         <li><a href="#">隐藏3</a></li>
  35.         <li><a href="#">隐藏4</a></li>
  36.         <li><a href="#">隐藏5</a></li>
  37.     </ul>
  38. </body>
  39. </html>

补充css知识点：绝对定位的元素，根据谁定位，根据有定位的父级元素，如果最近的父级没有定位，一直往上找，直到找到有定位的父级为止。

举例说明：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>父级定位</title>
  8.  
  9.     <style>
  10.  
  11.     #div1{
  12.         width: 200px;
  13.         height: 200px;
  14.         margin: 100px;
  15.         background-color: gray;
  16.     }
  17.     #div2{
  18.         width: 100px;
  19.         height: 100px;
  20.         background-color: red;
  21.         position: absolute;
    　　　　 top:50px;
    　　　　 left:50px;
  22.     }
  23.  
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="div1">
  28.         <div id="div2">
  29.  
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>
  34.  
  35. 因为：父级div1没有定位，所以div2就找到了body,不随div1的移动而移动

给父级加上相对定位

  1.     <style>
  2.  
  3.     #div1{
  4.         width: 200px;
  5.         height: 200px;
  6.         margin: 100px;
  7.         background-color: gray;
  8.         position: relative;
  9.     }
  10.     #div2{
  11.         width: 100px;
  12.         height: 100px;
  13.         background-color: red;
  14.         position: absolute;
  15.         left: 50px;
  16.         top: 50px;
  17.     }
  18.  
  19.     </style>
  20.  

结论：父相子随，父节点是相对定位，子节点会跟随父节点，相对父节点进行绝对定位

（三）setAttriuute设置属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Attribute设置属性</title>
  8.  
  9.     <script>
  10.  
  11.     window.onload = function(){
  12.  
  13.         var oIput = document.getElementById("inp")
  14.         var oBtn = document.getElementById("btn")
  15.  
  16.         oBtn.onclick = function(){
  17.             // 参数一，属性名，参数二，属性值
  18.             oIput.setAttribute("value","这是点击设置的参数")
  19.         }
  20.     }
  21.     </script>
  22.  
  23. </head>
  24. <body>
  25.    <input type="text" value="" id="inp">
  26.    <input type="button" id="btn" value="点击">
  27. </body>
  28. </html>

getAttribute（属性名）， removeAttribute（属性名）

（四）className选择元素：批量化操纵

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>className设置属性</title>
  8.     <script>
  9.  
  10.     window.onload = function(){
  11.         var oUl = document.getElementsByTagName("ul")[0]
  12.         var oLi = document.getElementsByTagName("li")
  13.         for(var i=0;i<oLi.length;i++){
  14.             if(oLi[i].className == "box"){
  15.                 oLi[i].style.backgroundColor = "red";
  16.             }
  17.         }
  18.     }
  19.     </script>
  20.  
  21. </head>
  22. <body>
  23.     <ul>
  24.         <li class="box"></li>
  25.         <li></li>
  26.         <li></li>
  27.         <li></li>
  28.         <li class="box"></li>
  29.         <li></li>
  30.     </ul>
  31. </body>
  32. </html>

但是有一个问题：如果考虑代码的复用性，上面的代码可以修改为

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>className设置属性</title>
  8.     <script>
  9.  
  10.     function getclassname(oParment,className){
  11.                 var aElement = oParment.getElementsByTagName("*");
  12.                 var aLi = new Array();
  13.                 for(var i=0;i<aElement.length;i++){
  14.                     if(aElement[i].className==className){
  15.                         aLi.push(aElement[i]);
  16.                     }
  17.                 }
  18.                 return aLi
  19.         }
  20.     window.onload = function(){
  21.  
  22.         var oUl = document.getElementById("u1")
  23.         var aBox = getclassname(oUl,"box")
  24.         alert(aBox.length)
  25.         for(var i=0;i<aBox.length;i++){
  26.             aBox[i].style.backgroundColor = "green"；
    　　　　　　　# 两种形式都可以
    　　　　　　　aBox[i].setAttribute("style","background:green")
  1.         }
  2.     }
  3.     </script>
  4.  
  5. </head>
  6. <body>
  7.     <ul id="u1">
  8.         <li class="box"></li>
  9.         <li></li>
  10.         <li></li>
  11.         <li></li>
  12.         <li class="box"></li>
  13.         <li></li>
  14.     </ul>
  15. </body>
  16. </html>

# TODO

javasctipt之DOM知识点的更多相关文章

  1. Javascript + Dom知识点总结

    Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...

  2. DOM知识点总结

    今天简单整理了一下js三部曲之DOM部分的内容,二话不说先上笔记: 1.什么是DOM? Document Object Model,即文档对象模型,它是让JavaScript能够操作html和xml的 ...

  3. HTML DOM 知识点整理（一）—— Document对象

    一.DOM对象 DOM对象整体包括: HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML DOM Console 对象 ...

  4. HTML DOM知识点补充：

    DOM Console 控制台对象提供了浏览器的debug的方法支持. 常用的:console.log(). ⚠️coffeescript中,这个方法不加括号. DOM Document 当一个HTM ...

  5. DOM 知识点梳理（笔记）

    1998年10月DOM1级规范成为了W3C的推荐标准,为基本的文档结构及查询提供了接口. 一.Node类型 每个节点都有个nodeType属性,表明了节点的类型.共有12种类型: 元素节点       ...

  6. 前端DOM知识点

    DOM即文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本 ...

  7. XML DOM 知识点

    第一部分[DOM基础] DOM介绍: 1.什么是 HTML DOM? HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法(接口). 2.什么是 XML DOM? XML DO ...

  8. 《对象及DOM知识点及其应用1》

    1.图片间的来回切换用if{}else{}; <超链接方式的切换图片(常用)>如:<a href="../images1/1-small.jpg" id=&quo ...

  9. JS DOM与BOM

    DOM知识点 [DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js ...

随机推荐

  1. Django下orm学习 一对多

    概念说明 ORM:关系对象映射的全称是 Object Relational Mapping, 简称ORM SQLAlchemy: 是Python编程语言下的一款ORM框架,该框架建立在数据库API之上 ...

  2. vim简单题练习-------出自《鸟哥的linux私房菜》第309页码题目

    用vim打开文件,在第34行向右移动15字符,怎么做? 34G 15->或者15j 如何到达文件的页首或者页尾? 1G或者gg G 如何在光标所在行中,移动到行头及行尾? home end vi ...

  3. windows server 2008 R2 怎么集成USB3.0驱动

    DELL最新出的T130.T330.R230.R330四款服务器新增了USB3.0功能,在安装2008 R2系统镜像需要集成USB3.0才能安装,不然鼠标和键盘动不了 先在D盘创建一个文件夹Temp, ...

  4. C++学习笔记-namespace

    指标识符的各种可见范围.C++标准程序库中的所有标识符都被定义于一个名为std的namespace中 关于iostream <iostream>和<iostream.h>格式不 ...

  5. C学习笔记-内存管理

    作用域 一个C语言变量的作用域可以是代码块 作用域,函数作用域或者文件作用域 代码块是{}之间的一段代码 同一个代码块不可以有重名变量 auto自动变量 一般情况下代码块内部定义的变量都是自动变量 也 ...

  6. 使用PowerShell 自动创建DFS命名空间服务器

    运行环境:Windows Server 2012 R2 DFS命名空间概述 DFS命名空间 PowerShell脚本命令 Writing PowerShell DFS Scripts: Managin ...

  7. 树莓派3 安装kali注意事项（无需显示器、键鼠连接树莓派）2017/9/18更新

     kali系统树莓派专用版下载地址https://www.offensive-security.com/kali-linux-arm-images/ 官方下载页面https://www.kali.or ...

  8. Kick Start 2019 Round A Parcels

    题目大意 $R \times C$ 的网格,格子间的距离取曼哈顿距离.有些格子是邮局.现在可以把至多一个不是邮局的格子变成邮局,问每个格子到最近的邮局的曼哈顿距离的最大值最小是多少. 数据范围 $ 1 ...

  9. python 运算和流程控制

    写在之前 今天突发奇想,想要弄一个微信自动抢红包的程序,首先去百度这个,找到了有两种方法 一种是安装「pocoui」这个第三方库,但没有给出详细代,我就没有使用这个方法. 我用使用的是第二种借助「Ai ...

  10. vue-router动态路由设置参数可选

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 ...