2021-03-03

Dom

document就是一种内置对象，对象就是属性和方法的无序集合；

document.getElementById():获取元素通过ID

• document.getElementById(”id名“);如果页面中包含多个同一个id则只会找到第一个id；
• document.getElementsByTagName(“标签名”)–返回类数组；不具有数组的原型方法，只有地址和length，不是node节点，叫做节点列表noteList；
• getElementsByClassName();根据类名获取元素，返回NodeLIst—>返回一个类数组；
• querySelectroAll() 根据css选择器返回全部的html元素，返回NodeList返回一个类数组
• querySelector()根据css选择器返回第一个html元素,返回Node;

//根据id找元素，并返回node节点
document.getElementById(”id名“)---返回一个标签--被叫做Node节点

• document.createElement(“标签”);创造页面中不存在的节点,创造并返回一个页面中不存在的节点;–在页面中不存在,但是在js中是有的;如何插入到页面中?
  • 第一种:appendChind;将一个元素插入到零一元素的结束标签之前;
  • 第二种:把一个元素插入到另外一个元素之前,获取目标插入位置的父元素,参照物的父级元素.insertBefore(“插入的元素”,参照物);
  • 此两种方法是在node节点下的

Node节点

• className：设置或返回元素的class属性的属性值
  • innerHTML 设置或返回原色的开始标签与结束标签之间的内容;
• value 设置或返回文本框与文本域之间的内容
• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zXTyTKvM-1614774753421)(C:\Users\珍珠\AppData\Roaming\Typora\typora-user-images\image-20210303114345516.png)]
• setAttribute(属性名,属性值);函数,就是方法;用于设置元素的自定义属性;
• getAttribute(属性名) 获取元素的自定义属性
• getElementsByClassName();node节点去调用的话,选取的范围是该node节点下的标签;
• document.getElemedntsByTagName(“标签名”)–与上一个方法类似;node节点去调用的话,选取的范围是该node节点下的标签;
• nextElementSibling;返回下一个紧邻的兄弟节点,是一个属性
• previousElementSibling;返回上一个紧邻的兄弟;
• parentNode;返回父级元素,也可以返回父亲的父亲
• children；找儿子
• remove();删除元素
• cloneNode(true) 复制一个元素的内容,true的意思是连同内容一起复制的意思
• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLFSSF0v-1614774753424)(C:\Users\珍珠\AppData\Roaming\Typora\typora-user-images\image-20210303143010763.png)]

节点操作的应用-添加删除克隆

NodeList节点列表：类数组

• 只有length方法，废物方法；

• 它是若干个Node节点组成的一个类数组。

• 一般用于循环，结合for循环对所有的某一个标签进行设置className()