JS------DOM

DOM

1.回顾

1.1 字符串方法

• charAt()
• charCodeAt()
• indexOf()
• lastIndexOf()
• 截取
  • substring()
  • slice()
  • substr()
• split()
• replace()
• toUpperCase(),toLowerCase()
• trim()

1.2 数组

• 数组栈方法

  • push，pop
  • unshift，shift

• splice(start，deleteCount，items)

• indexOf()

• sort()

• reverse()

• concat()

• slice()

• join(组合标志):将数组按特定符号组合成字符串

  var arr = ["2020","12","24"];
  console.log(arr.join()); //2020,12,24
  console.log(arr.join("")); //20201224
  console.log(arr.join("-")); //2020-12-24
  
  //ui转换为web
  var str = "javauijavauijavauijava";
  str=str.split("ui").join("web");
  console.log(str);
  

2.数组迭代方法

• every：针对数组做些判断，如果结果都为ture，最后才为true

  //1.every：针对数组做些判断，如果结果都为ture，最后才为true
  var arr = [89,98,96,100,88];
  //如果所有的成绩都在80以上，拉出去打一顿
  var n = 0;
  var isD = arr.every(function(value,index,array){
      //value:数组项，index下标 array：当前操作的数组 
      return value>80;
  });
  console.log(isD); //false
  

• some():针对数组做些判断，只要有一个为ture，最后就为true

  //2.some:针对数组做些判断，只要有一个为ture，最后就为true
  var arr = [59,68,36,100,18];
  //只要有一门成绩100+，拉出去打一顿，偏科
  var is =  arr.some(function(value){
      return value >= 100;
  });
  if(is ==true){
      console.log("拉出去打一顿，偏科");
  }
  

• filter:针对数组做些判断，满足条件的会组成一个新的数组返回

  //3.filter:针对数组做些判断，满足条件的会组成一个新的数组返回
  var arr = [
      {"name":"手机","type":"华为meta40","price":8999},
      {"name":"电脑","type":"mac","price":13999},
      {"name":"电脑","type":"外星人","price":139999},
      {"name":"手机","type":"诺基亚","price":99},
      {"name":"电视","type":"小米","price":999}
  ];
  var newArr = arr.filter(function(value){
      return value.name == "电视";
  });
  console.log(newArr);
  

• map():返回的值会组成一个新的数组

  //4.map:返回的值会组成一个新的数组
  var arr = [56,78,54,98,12];
  var arr = arr.map(function(value,index){
      console.log(index+"-------"+value);
      return value+5;
  });
  console.log(arr); // [61, 83, 59, 103, 17]   
  

• forEach():循环数组

  //5.forEach
  arr.forEach(function(value,index){
      console.log(index+"--------"+value);
  })
  

3.DOM

DOM：Document Object Model 文档对象模型

节点：node

DOM主要是针对标签的一些操作：获取，添加，修改，删除，替换

3.1 获取

3.1.1 DOM获取元素

• 通过id名：document.getElementById（“id名”）：具体的实际的标签，获取的时候有就是有，没有就是没有

• 通过TagName:

  • document.getElementsByTagName（“标签名”）:整个文档中，获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签
  • 父元素.getElementsByTagName（“标签名”）:父元素中的,获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签

• 通过ClassName：

  • document.getElementsByClassName（“类名”）:整个文档中，获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签
  • 父元素.getElementsByClassName（“类名”）:父元素中的,获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签

• 通过选择器获取（ie8+）

  • document.querySelector(“css选择器”)

  • document.querySelectorAll(“css选择器”)

    //1.通过选择器获取:静态获取，获取的时候有多少就是多少，后期添加都获取不到
    //document.querySelector("选择器"):获取选择器选中标签中的第一个元素
    var oUl = document.querySelector(".list");
    console.log(oUls);
    
    //document.querySelectorAll("选择器"):获取选择器选中的所有标签  节点列表
    var oUls = document.querySelectorAll(".list");
    console.log(oUls);
    console.log(oUls.length);
    
    var oLis = document.querySelectorAll("#list1 li");
    console.log(oLis);
    
    oUl.innerHTML += "<li>吃饭</li>";
    

3.1.2 获取子节点

• 非标准属性：父节点.children（一般用这个）

  //2.获取子节点
  //非标准属性：父节点.children（一般用这个）
  var childs = oUl.children;
  console.log(childs);//HTMLCollection(4)
  

• 标准属性：父节点.childNodes

  //标准属性：父节点.childNodes
  var childs = oUl.childNodes;
  console.log(childs); //NodeList(9) 
  

  注意：节点并不是单指标签

  节点包括：标签节点，文本节点(空格，回车，文字),属性节点–2,注释节点 。。。。。

• 基本属性

  • nodeType：获取节点类型

  • nodeName：获取节点名称

  • nodeValue：操作文本节点内容

    //4.节点属性  nodeType，nodeName，nodeValue
    console.log(childs[0].nodeType); //文本--3
    console.log(childs[1].nodeType); //标签--1
    console.log(childs[3].nodeType); //注释--8
                                     //属性--2
    
    console.log(childs[0].nodeName); //文本--#text
    console.log(childs[1].nodeName); //标签--Li
    console.log(childs[3].nodeName); //注释--#comment
    
    //nodeValue是操作文本节点
    childs[0].nodeValue = "吃饭吗？";
    

3.1.3 获取父元素

• 获取直接父元素：子元素.parentNode

  //2.获取父节点(直接父元素)  子节点.parentNode
  var p = oSpan.parentNode;
  console.log(p);
  

• 获取定位父元素:子元素.offsetParent,如果没有定位父元素获取到body

   //3.获取定位父节点  子节点.offsetParent，没有定位父元素获取到body
  var oO = oSpan.offsetParent; //
  console.log(oO);
  

3.1.4 获取兄弟节点

• 首节点：父节点.firstElementChild || 父节点.firstChild
• 尾节点：父节点.lastElementChild || 父节点.lastChild
• 上一个兄弟：参考节点.previousElementSibling ||参考节点.previousSibling
• 下一个兄弟：参考节点.nextElementSibling ||参考节点.nextSibling

3.2 添加节点

3.2.1 创建节点

• 创建标签节点：document.createElement(“标签名”)；

• 创建文本节点：document.createTextNode(“文本内容”)

  //2.创建节点： document.createElement("标签名")
  var cLi = document.createElement("li");
  //cLi.innerHTML = "完成一个项目";
  
  //3.创建文本节点：document.createTextNode("文本内容")
  var text = document.createTextNode("完成两个项目");
  //把文本添加到标签中
  cLi.appendChild(text);
  

3.2.2 添加节点

• 追加 在父元素的末尾添加 父节点.appendChild(子节点)

  //2.创建节点： document.createElement("标签名")
  var cLi = document.createElement("li");
  cLi.innerHTML = "完成一个项目";
  //1.追加：在父元素的末尾添加  父节点.appendChild(子节点)
  oUl.appendChild(cLi);
  

• 在某个元素之前添加: 父节点.insertBefore(newChild，refChild)

  //4.在某个元素之前添加: 父节点.insertBefore(newChild，refChild)
  var iLi = document.createElement("li");
  iLi.innerHTML = "不吃饭";
  oUl.insertBefore(iLi,oLi[2]);
  

注意：添加一个已经存在的标签，发生物理位移

3.3删除节点

• 删除自身：标签.remove（） ie不兼容

• 删除子节点：标签.removeChild(子节点)

   var oUl = document.getElementsByTagName("ul")[0];
  //1.删除标签本身  标签.remove(); 不建议使用，ie不兼容
  //oUl.remove(); 
  
  //2.删除子元素: 父元素.removeChild(子节点)
  oUl.removeChild(oUl.children[2]);
  

3.4 复制与替换

• 替换：父节点.replaceNode(newChild，refChild)

  //替换：父节点.replaceChild(newChild,refChild)
  var cDiv = document.createElement("div");
  cDiv.innerHTML = "我是一个小可爱";
  document.body.replaceChild(cDiv,oDiv)
  

• 复制：被复制的节点.cloneNode(true)

  //复制节点：被复制的节点.cloneNode(boolean)
  //boolean 默认是false:只复制标签没有内容      true：复制标签和内容
  var cloneD = oDiv.cloneNode(true);
  document.body.appendChild(cloneD);
  

3.5 操作属性节点

• 操作属性

  • 获取：var 变量 = 标签.属性名
  • 设置：标签.属性名 = 属性值

• DOM操作属性节点

  • 获取：标签.getAttribute(“属性名”)
  • 设置：标签.setAttribute(“属性名”,“属性值”)
  • 删除：标签.removeAttribute(“属性名”)

  //1.获取id
  console.log(oDiv.getAttribute("id"));;
  console.log(oDiv.getAttribute("class"));
  
  //2.设置
  oDiv.setAttribute("class","active");
  
  //3.删除
  oDiv.removeAttribute("id");
  
  //区别：可以获取直接写在行内的自定义属性，删除某个指定的属性
  console.log(oDiv.index); //undefined  获取不到直接写在标签上自定义属性
  console.log(oDiv.getAttribute("index")); //0