获取元素
有3种DOM方法可以获取元素节点,分别是通过元素ID,标签名字和通过类名来获取。
getElementById
该方法返回一个需要的id属性值的对象
getElementsByTagName
1. 该方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。
2. 可以利用length属性查询,该数组有多少个元素
3. 可以加入一个通配符作为参数(*),表示获取文档中的所有元素。
比如:获取文档中所有元素的总长度
document.getElementsByTagName(*).length
getElementsByClassName
该方法通过class属性的类名访问元素
1. 只接受一个参数,就是类名
2. 返回的是具有相同类名的元素数组
3. 如果要获取带有多个类名的元素,要指定多个类名,之间要用空格隔开,如下图

获取和设置属性getAttribute和setAttribute
一般都是配合getElementById,getElementsByTagName,getElementsByClassName的
获取到元素后,利用他们设置获取他们的各个属性。
getAttribute
他是一个函数,他只要一个参数(你需要查询的属性的名字)
getAttribute方法不属于document对象,所有不能通过document对象调用,他只能通过元素节点对象调用。
并且,如果调用的属性名不存在,则返回null

setAttribute
他允许我们对属性节点的值做出修改,只能用于元素节点
我们设置的节点属性的时候,如果该节点不存在的,则他会创建这个属性,然后设置这个值,如果存在,则覆盖原来的值

注意:通过setAttribute对文档做出修改后,在浏览的源代码中看到的值仍然是原来的值。这就是DOM的工作模式,先加载文档静态内容,再动态刷新。(动态刷新不影响静态内容)。
引入JS文件
需要插入在</body>标签之前

引入CSS文件
要插入在head标签之中
圈起来的是 css文件名

childNodes
在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,他是一个包含这个元素全部子元素的数组
如果需要访问childNodes的第一个元素,可以用firstChild
如果需要访问childNodes的最后一个元素,可以用lastChild
nodeType
这个属性告诉我们,我们正在与哪个节点打交道
他总共有12种可取值,只要一下3种有实用价值

nodeValue
它可以得到和设置一个节点的值 P56 概念有点复杂,不好描述。。
网友评论