一文搞定js中的dom基础与进阶 -凯发k8官方网

文章目录:

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

节点和元素的概念解析:

每一个元素是一个节点，每一个节点看成一个对象

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

节点是包含元素的

每一个元素是一个节点，这个节点称为元素节点

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

例子：

例子1：
对上述例子分析：

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

例子3：动态创建图片：

例子4：创建多个元素：

4.1appendchild()

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

例子：

4.2insertbefore()

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

例子：

语法：a.removechild(b)：删除父元素下的子元素，a表示父元素,b表示父元素内的某个子元素

例子1：删除最后一个子元素：

例子2：删除整个列表：

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

例子：

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

演示一下上述的例子：

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.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.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.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>

没点击之前：

点击之后：

11.2查找子元素

firstelementchild：获取第一个子元素节点
lastelementchild：获取最后一个子元素节点

例子1：childnodes与children的比较

例子分析：为啥第一个长度为7,毋庸置疑元素节点有三个，还有四个空白节点，由于每个ul和li,每个li和li之间有一个空格，js会把这些空格当成空白节点，所以长度为7

例子2：

上面代码我们在进行删除的时候，我们发现，我们想要删除一个li元素，必须点两次删除。那肯定是空白文档搞得鬼，我们可以使用使用nodetype属性来判断,这个属性是判断节点类型的，每一个类型的节点nodetype属性值不同

节点类型nodetype值

元素节点	1
属性节点	2
文本节点	3

那么我们每次删除的时候，先判断节点类型，是文本节点(空白节点属于文本节点)就删除两次，是元素节点就删除一次，如下(点击一次就能删除)：

11.3查找兄弟元素

previoussibling：查找前一个兄弟节点
nextsibling：查找后一个兄弟节点
previouselementsibling：查找前一个兄弟元素节点
nextelementslibling：查找后一个兄弟元素节点

例子：

innerhtml：获取和设置一个元素的内部元素
innertext：获取和设置一个元素的内部文本

例子1:

如果要用innerhtml就比较简单了(本质就是用innerhtml设置一个内部元素)

innerhtml和innertext到底是获取啥的呢，看例子2：

最后一个例子：

我们可以看到innerhtml后面的字符串既然可以换行写，一般情况下是不能换行的，在innerhtml中要把字符串截断分行显示，在每次截断的地方加一个\就行

最后我们再把innerhtml和innertext所表示的内容再举几个例子：

总结

以上是凯发k8官方网为你收集整理的一文搞定js中的dom基础与进阶的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。