2020.08.23 DOM基础

DOM结构

一句话总结：DOM操作，可以简单的理解成元素操作。
我们在操作元素时，其实就是把这个元素看成对象，然后使用这个对象的属性和方法来进行相关操作

• 注：节点和元素是不一样的概念，节点包括元素，常见的节点有元素节点，属性节点、文本节点

获取元素的相关方法（重要）

* getElementById（"id名"）
* getElementsByClassName("类名")
* getElementsByTagName("标签名")
* getElementsByName("name名")
* querySelector()和querySelectorAll("css选择器")
* document.body和document.title

• 注意：以上方法都很重要，严格区分大小写，除了第一个的Element不加s，其他都加。(因为获取的是元素的集合)
• 只有id名的是Node类型，其他都是NodeList类型，即类数组，只有下标特性和.length属性
• 要使用的话要循环，(.length属性经常使用)即使只有一个就在获取完之后需要加[0]
• ID获取和class获取是不需要加# 和.的
• 获取到的是对象，习惯上变量名以"o"开头
• 对于id来说因为页面只有一个元素，所以用id方法来获取方法效率更高
• getElementsName()方法只适用于表单元素，因为它有一个name属性。一般只用于单选框和复选框。
• 可以说querySelectorAll()是万能方法了
• 只有获取了元素才可以对元素进行相应的操作

动态添加DOM元素

例：document.body.innerHTML = “xxx”;为body元素、创建动态DOM。
注：getElementsByTagName()方法可以操作动态创建的DOM元素，而getElementById()方法无法实现,getElementsByClassName()也不能操作动态DOM

创建元素

    createElement() 创建元素节点
    createTextNode() 创建文本节点

创建必有插入，不插入则无意义

创建一个元素的四个步骤：

• 创建元素节点 createElement()
• 创建文本节点 createTextNode()
• 把文本节点插入元素节点：appendChild()
• 把组装好的元素插入到已有元素中appendChild()

插入元素

    A.appendChild(B); //将B插入到A内部子元素的“末尾”
    A.insertBefore(B,指定位置) //将B插入到指定位置之前
    这两种方法都需要先获取父元素才可以操作

删除元素

   A.removeChild(B);
   在删除元素前必须要找到两个元素：被删除的子元素和被删除元素的父元素

复制元素

    obj.cloneNode(bool) //参数为布尔值，true或1为复制本身和所有的子孙元素，false或0为只复制该元素本身

替换元素

    A.replaceChild(new,old);
    要想实现替换元素必须提供三个节点：父元素、新元素、旧元素

HTML属性操作(对象方法)

    obj.getAttribute("attr") //获取元素的某个属性值,只有一个参数。
    // 这个技巧在提前设置好属性值为nember类型获取到之后创建动态DOM操作时经常用到

设置属性值

    obj.setAttribute("attr","值")
    obj.attr = "值"

对象名.style.color = “red”
window.onload = function()
input框里的值都是通过value属性来获取的