随笔07

DOM

Document Object Model    文档对象模型

发展史

DOM0;

DOM1; 1998 W3C 推荐版本

DOM2;  2000年；

DOM3;  2004年；

DOM4;  2015年；

节点   Node

快速查找节点

document.getElementById("id名")；  通过id查找； id唯一；

document.getElementsByTagName("元素名")； 通过元素名查找；

document.getElementsByName("name值")； 通过name值查找；

document.getElementsByClassName("class值")；  通过class值查找；

getElement 只获取一个 ；

getElements 获取多个 作为一个数组存储；

HTML5新增  可以通过css选择器获取   

获取第一个满足的元素节点

document.querySelector(css选择器);  如   ("header>navl");

获取所有满足的元素节点   以数组存储

document.querySelectorAll(css选择器); 如 ("header>navl");

注：querySelector和querySelectorAll获取到的不是实时的元素节点；

比如：在删除时，可以看到删除了，但任然可以获取到已被删除的节点；

通过关系层次查找

先获取一个节点

let a =document.querySelector("header>navl");

查找父节点

a.parentNode;

查找兄弟节点

a.previousSibling;  前一个节点；     

a.nextSibling;  下一个节点；

  当有回车等字符时 获取的是文本字符空格；需再向前向后获取；

a.previousSibling.previousSibling;

a.nextSibling.nextSibling;

查找子节点  

a.firstElementChild;

a.lastElementChild;

新增元素节点  

1.先创建一个元素节点；    creatElement

let  b =document.creatElement("p");

2.给该元素节点添加内容；   appendChild

let  c=document.creatTextNode("abcd");

b.appendChild(c);

3.新元素节点添加到相应位置； appendChild

let d =document .getElementByClassName(" ");

d.appendChild(c);

appendChild添加的元素节点为最后一个；

插入元素节点

1.创建新元素   p1;

2.父元素   secEle;

3.获取已有元素    p2;

4.把新元素添加到已有元素之前

secEle.insertBofore(p1, p2);

删除元素节点

1.获取要删除的父元素节点；

2.父元素节点.removeChild(要删除的元素节点)；

替换元素节点

1.创建元素节点

2.获取父元素节点

3.获取要被替换的子元素节点

4.父元素节点.replaceChild(新节点，要被替换的节点)；

快速替换元素内容

1.获取要被替换的元素节点；

let sec =document.getElementByClassName(" ");

2.进行内容的替换

sec.innerText="     ";   "  " 内的内容就是替换后的内容，不解析；

sec.innerHTML="     ";    "  " 内可以书写HTML格式的代码，可以解析；

克隆节点

1.获取节点

let ele1=document.getElementByClassName(" ");

2.深克隆

let newEle = ele1.cloneNode(true);   克隆包含该节点的子节点；

3.浅克隆

let newEle = ele1.cloneNode(false);  克隆不包含该节点的子节点；

属性节点

获取属性节点的值；

1. 获取节点

   let ele1=document.getElementByClassName(" ");

2. 获取节点属性值

   ele1.getAttribute("class");  获取到该节点属性为class的值；

   ele1.getAttribute("name");  获取到该节点属性为name的值；

设置属性节点的值

1.获取节点

let ele1=document.getElementByClassName(" ");

2.设置

ele1.setAttribute(属性名，属性值)；  ele1.setAttribute("class", "lo");

删除元素节点

1.获取节点

let ele1=document.getElementByClassName(" ");

2.删除

ele1.removeAttribute("name");    删除name属性；

快速对属性节点进行操作

1.获取节点

2.ele1.className=“ lo   po” ；给ele1的class设置两个值lo，po；

ele1.type="password";     ele1的type属性为password；

class是JS关键字，无法使用，为了能修改，特使用className设置；

label元素的for属性用htmlFor设置；

自定属性   以data-开头

<section data-love="co">   </section>

let ele2 =docement.getElementByTagName("section");

ele2.dataset.love="do";        修改自定属性值为do；

随笔07

原文：https://www.cnblogs.com/luoxiangbo/p/12287574.html