文章目录:

1.DOM简介
2.获取元素
        getElementByld()
        getElementsByTagName()
        getElementsByClassName()
        querySelector()和querySelectorAll()
        getElementsByName()
        选择title元素和body元素
3.创建元素
4.插入元素
        appendChild()
        insertBefore()
5.删除元素
6.复制元素
7.替换元素
8.HTML属性操作(对象属性)
        获取HTML属性值
        设置HTML属性值
9.HTML属性操作(对象方法)
        getAttribute()
        setAttribute()
        removeAttribute()
        hasAttribute()
10.CSS属性操作
        获取CSS属性值
        设置单一CSS属性
        设置多个CSS属性
11.DOM遍历
        查找父元素
        查找子元素
        查找兄弟元素
12.innerHTML和innerText
在这里插入图片描述

1.DOM简介

在这里插入图片描述

节点和元素的概念解析:

每一个元素是一个节点，每一个节点看成一个对象
我们操作元素的时候实际上是把元素看成一个对象，然后对这个对象的属性和方法进行相关的操作
节点是包含元素的
每一个元素是一个节点，这个节点称为元素节点

在这里插入图片描述

2.获取元素

2.1获取元素概述

获取元素其实就是，获取元素节点，对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了才能对其进行相应的操作。

2.2getElementByld()

getElementByld()：通过id来选择元素
语法：document.getElementById("id名")

例子：
在这里插入图片描述
getElementByld()：不可以操作动态的DOM，如下：

2.2getElementsByTagName()

getElementsByTagName():通过标签名来选择元素
语法：document.getElementsByTagName("标签名")

在这里插入图片描述
我们可以看到我们并没有按照标准的语法来写这段代码，那么上面的例子是不是可以这么写呢

在这里插入图片描述

当然可以但是我们需要知道两者的区别，第一种写法的意思是获取的是id为list的ul元素下的所有li元素(以伪数组的形式)，第二种写法的意思是获取整个HTML页面的所有li元素(以伪数组的形式)

注：伪数组的形式指的是只能使用length和下标的方式，但是对于数组的其他方法是无法使用的

getElementsByTagName()能操作动态创建的DOM，如下：
在这里插入图片描述

2.3getElementsByClassName()

getElementsByClassName()：通过class来选择元素
语法：document.getElementsByClassName("类名")

在这里插入图片描述

2.4querySelector()和querySelectorAll()

querySelector()和querySelectorAll()：通过选择器的方式来获取所需要的元素
querySelector()：选取满足选择条件的第一个元素
querySelectorAll()：选取满足条件的所有元素
语法：
document.querSelector("选择器“)
document.querySelectorAll("选择器")
选择器的写法和CSS完全一致

在这里插入图片描述

2.5getElementsByName()

getElementsByName()：表单元素一般有一个其他元素都没有的name属性，如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()来实现。一般的getElementsByName()只用于表单元素，且只用于单选按钮和复选框
语法：document.getElementsByName("name名")

例子1：
在这里插入图片描述
例子2：

2.6.选择title元素和body元素

由于一个页面只有一个title元素和一个body元素所以专门提供两个方便的方法进行选择
语法：document.title和document.body

例子：
在这里插入图片描述

3.创建元素

在这里插入图片描述

例子1：
在这里插入图片描述对上述例子分析：

例子2创建带属性的元素：

例子3：动态创建图片：

在这里插入图片描述例子4：创建多个元素：

4.插入元素

4.1appendChild()

appendChild()：把一个新的元素插入到父元素的内部子元素的末尾
语法：A.appendChild(B)：在没有特殊说明的情况下，A表示父元素，B表示动态创建好的新元素

例子：
在这里插入图片描述

4.2insertBefore()

insertBefore()：将一个新的元素插入到父元素的某一个子元素之前
语法：A.insertBefore(B,ref)：A表示父元素，B表示子元素，ref表示指定子元素

例子：
在这里插入图片描述

5.删除元素

语法：A.removeChild(B)：删除父元素下的子元素，A表示父元素,B表示父元素内的某个子元素

例子1：删除最后一个子元素：
在这里插入图片描述

例子2：删除整个列表：
在这里插入图片描述

6.复制元素

语法：obj.cloneNode(bool)：复制元素
obj表示被复制的元素，bool表示一个布尔值
bool取1或者true表示复制元素本身以及该元素下的所有子元素
0或者false表示仅仅复制元素本身，不复制该元素下的所有子元素

例子：
在这里插入图片描述

7.替换元素

语法：A.replaceChild(new,old)
A表示父元素，new表示新子元素，old表示旧子元素

在这里插入图片描述演示一下上述的例子：

8.HTML属性操作(对象属性)

8.1HTML属性操作(对象属性)简介

在这里插入图片描述

8.2获取HTML属性值

语法：obj.attr
obj是元素名，是一个DOM对象，所谓的DOM对象就是使用getElementByld()和getElementsByTagName()等方法获取的元素节点，attr是一个属性名

例子1：获取静态HTML中的属性值
在这里插入图片描述
例子2：获取动态DOM中的属性值

在这里插入图片描述

例子3：获取文本框的值
在这里插入图片描述

例子4：获取单选框的值
在这里插入图片描述
例子5：获取复选框的值
例子6：获取下拉菜单的值

8.3设置HTML属性值

语法：obj.attr="值"
obj是元素名是一个DOM对象，attr是属性名

例子1：
在这里插入图片描述
例子2：

我们点击修改后

9.HTML属性操作(对象方法)

9.1getAttribute()

语法：obj.getAttribute(“attr”)：获取某个元素属性的值
obj是元素名，attr是属性名。注意它只能有一个参数且特别注意attr要用引号
其实obj.getAttributr("atttr")和obj.attr获取属性值的方式是等价的都能获取静态的HTML属性值和动态的DOM属性值

例子1：获取固有属性值

在这里插入图片描述
例子2：获取自定义属性值

看到弹出的结果，可能和我们想的预期的不一样，那么这是为啥呢，其实这个data是我们自定义的属性，不是用户自带的，我们使用obj.attr是无法获取自定义属性的，那么这时候只能使用的我们的getAttribute()，如下：

在这里插入图片描述

9.2setAttribute()

语法：obj.setAttribute(“attr”,"值")：设置某个元素某个属性的值
obj是元素名，attr是属性名第一个参数是属性名，第二个参数是要设置的属性值，同样的一下两个也是等价的
obj.setAttribute(“attr”,"值")
obj.attr="值"

例子：
在这里插入图片描述

9.3removeAttribute()

语法：obj.removeAttribute()：删除某个属性

例子1：
在这里插入图片描述
例子2：

9.4hasAttribute()

语法：obj.hasAttribute()：判断元素是否包含某一个属性，包含返回true不包含返回false

在这里插入图片描述

10.CSS属性操作

10.1获取CSS属性值

语法：getComputedStyle(obj).attr或getComputedStyle(obj)["attr"]
obj代表DOM对象，通过getElementByld()和getElementsByTagName()等方法获取，attr代表表示CSS属性名，属性名使用的是驼峰原则，比如我们的CSS属性字体大小是font-size，当我们用js来获得属性值的时候要这么写fontSize，其他的类似。

下面举个例子：
在这里插入图片描述

10.2设置单一CSS属性值

1.设置一个属性值：obj.style.attr="值"等价于obj.style["attr"]="值"，属性名使用驼峰原则

例子1：设置一个属性值
在这里插入图片描述
例子2：设置符合属性值

由于我们的attr和val都是我们输入的字符串所以不能用obj.style.attr来设置，而是用obj.style[attr]

10.3设置多个CSS属性值

语法：obj.style.cssText="值",注意这里再使用的时候就不再使用驼峰原则了

例子1：在这里插入图片描述

当我在文本框中输入：height:50px;width:50px;background-color:red;就变成了：
在这里插入图片描述
例子2：

10.4一个值得思考的问题：

我们在获取CSS属性值的时候使用obj.style.attr或者obj.style["attr"]不就行了，为啥要使用getComputedStyle()呢，看下面一段代码：
在这里插入图片描述
为啥？？？？获取宽度失败。原因是因为obj.style.attr只可以获取元素style属性中设置的CSS属性值
对于内部或者外部样式是没有办法获取的，下面行内样式就能成功获取

在这里插入图片描述
getComputedStyle()可以获取内部和外部，行内式

11.DOM遍历

11.1查找父元素

语法：obj.parentNode：获取某个元素的父元素
同样的obj是DOM对象

例子(代码太长显示不完就直接上代码了)：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        table{border-collapse:collapse;}
        table,tr,td{border:1px solid gray;}
    </style>
    <script>
        window.onload = function () {
            var oTd = document.getElementsByTagName("td");

            //遍历每一个td元素
            for (var i = 0; i < oTd.length; i++) {
                //为每一个td元素添加点击事件
                oTd[i].onclick = function () {
                    //获得当前td的父元素（即tr）
                    var oParent = this.parentNode;

                    //为当前td的父元素添加样式
                    oParent.style.color = "white";
                    oParent.style.backgroundColor = "red";
                };
            }
        }
    </script>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>