Javascript DOM_添加一个已经存在的节点发生物理位移-CSDN博客

本文链接：https://blog.csdn.net/juan_bing/article/details/110351447

标题DOM

标题一、数组的迭代方法

1、操作input的选中

//1.设置选中
oIn.checked = true; //true–选中 false—未选中

//2.设置取消选中
oIn.checked = false;

2、every

every：对数组元素做判断，里面的判断结果都为真，最后才为真

var arr = [89,76,83,54,90];

//是否都及格
var is = arr.every(function(value,index,array){
//value–数组元素 index–数组下标 array–当前数组本身
return value>=60;
});
is–false

3、some

some()：针对数组元素做判断，只要有一个为true，结果就为true

var da = arr.some(function(value,index,array){
return value >= 90;
});
console.log(da); //true

4、filter

filter：针对数组元素做判断,满足条件的组成一个新的数组返回

5、map

map:循环数组，返回一个新数组

var arr = [56,90,87,34,93,81];
arr = arr.map(function(value,index){
return value+5;
});
console.log(arr);

6、forEach

forEach:循环数组，没有返回值,和for循环的是一样的，但是不用自己定义设置循环条件，数组元素直接定义在value中，不需要再通过下标获取，方便使用

var arr = [56,90,87,34,93,81];
arr.forEach(function(value,index){
//index
//value
arr[index]
});

注意：不支持break，continue

二、DOM

DOM：Document Object Model 文档对象模型获取，添加，删除，替换，复制

浏览器在渲染文档的时候，为了层级结构更明显，解析成DOM

div：标签，标记，元素，节点

1、查找元素

获取子节点
- 父节点.children 非标准属性，一般就用这个
- 父节点.childNodes 标准属性获取到很多其他的节点 (文本，标签，注释)
  
  //父节点.children 非标准没有兼容问题，一般就使用这个
  var child = oUl.children;
  console.log(child); //HTMLCollection(7) 元素集合
  
  //父节点.childNodes 标准属性获取到其他的节点
  var child2 = oUl.childNodes;
  console.log(child2); //NodeList(15) 节点列表类数组
  console.log(child2.length); //15
节点类型
- 分类：节点类型：标签节点，文本节点，属性节点，注释节点
- 节点基本属性：
  
  //节点属性
  //nodeType:节点类型标签节点：1 属性节点：2 文本节点：3 注释：8
  console.log(child2[0].nodeType); //3
  console.log(child2[1].nodeType); //1
  console.log(child2[3].nodeType); //8
  
  //nodeName：节点名称
  console.log(child2[0].nodeName); //#text
  console.log(child2[1].nodeName); //LI
  console.log(child2[3].nodeName); //#comment
  
  //nodeValue：节点内容只有文本节点有内容
  child2[0].nodeValue = “试试就试试”
获取父节点
- 子节点.parentNode : 获取直接父节点
- 子节点.offsetParent: 获取定位父节点，没有获取到body
  
  //获取父元素
  //获取直接父元素子元素.parentNode;
  console.log(oSpan.parentNode); //p
  
  //获取定位父元素子元素.offsetParent 有定位父元素获取定位父元素，没有就获取body
  console.log(oSpan.offsetParent);
获取其他节点
- 获取首节点
  - 父元素.firstChild IE浏览器可以正常使用，标准浏览器会获取折行（文本）
  - 父节点.firstElementChild 针对标准浏览器获取到折行，解决的方法，但是IE不兼容
    
    //兼容，如果是属性取值的兼容，用|| ,把不容易实现放在前面
    //alert(oUl.firstElementChild);
    var first = oUl.firstElementChild || oUl.firstChild;
    first.style.background = “red”;
- 获取尾节点
  
  //尾节点父元素.lastChild 父元素.lastElementChild
  var last = oUl.lastElementChild || oUl.lastChild;
  last.style.background = “blue”;
- 获取兄弟节点
  下一个兄弟节点参考节点.nextSibling 参考节点.nextElementSibling
  var next = hero.nextElementSibling || hero.nextSibling;
  next.style.background = “greenyellow”;

上一个兄弟参数节点.previousSibling 参考节点.previousElementSibling
var prev = hero.previousElementSibling || hero.previousSibling;
prev.style.background = “orange”;

2、创建节点

创建标签节点：document.createElement(“标签类型”);
创建文本节点：document.createTextNode(“文本内容”);

//1.创建节点 document.createElement(“标签类型”);
var cLi = document.createElement(“li”);
//添加内容的第一种方式
cLi.innerHTML = “刘亦菲”;

//添加内容的第二种方式
//2.创建文本节点
var text = document.createTextNode(“刘亦菲”);
cLi.appendChild(text);

3、添加节点

追加，在父元素末尾追加子节点
- 父节点.appendChild

追加：在父元素的末尾添加
//父节点.appendChild
oUl.appendChild(cLi);

如果添加的是一个已经存在的标签，会发生物理位移
oUl.appendChild(oUl.children[0]);

插入：在某个元素之间加入节点

在某个元素之前添加父节点.insertBefore(newChild,refChild)
var xLi = document.createElement(“li”);
xLi.innerHTML = “学习”;
oUl.insertBefore(xLi,oUl.children[1]);

4、删除节点

标签.remove() : 不建议使用，ie不兼容
父元素.removeChild（子节点)

//标签.remove();
//oLi[0].remove(); //ie不兼容

//父节点.removeChild(子节点)
oUl.removeChild(oLi[0]);

5、替换节点

父节点.replaceChild(newChild，refChild)

//1.替换父节点.replaceChild(newChild,refChild);
var cLi = document.createElement(“li”);
cLi.innerHTML = “new Object”;
oUl.replaceChild(cLi,oLi[0]);

6、复制节点

被复制的节点.cloneNode()

//2.复制被复制的标签.cloneNode(false)
//false：默认是false，只复制标签
//true:复制标签和内容
var copy = cLi.cloneNode(true);
oUl.appendChild(copy);

7、DOM获取元素的方式

通过id获取：document.getElementById
通过标签名获取：document.getElementsByTagName(“标签名”)
通过类名获取：document.getElementsByClassName(“类名”)
通过选择器获取（兼容ie8+）
- document.querySelector(“选择器”)
- document.querySelectorAll(“选择器”)
  
  //document.querySelector():获取选择器选中第一个标签
  var oLi = document.querySelector("#list1 li");
  console.log(oLi);
  
  //document.querySelectorAll():获取选择器选中所有标签
  var oLi = document.querySelectorAll("#list1 li");
  console.log(oLi); //NodeList(5) [li, li, li, li, li]
  console.log(oLi.length,oLi[0]);