DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。

每个节点都可以看作是文档树的一片叶子,一棵树是由无数片叶子所组成

最顶层的节点就是document节点,它代表了整个文档;是文档的根节点

 

查找节点:

整个文档的节点都是document节点,那么想要找到具体的某个节点,我们可以用document提供的一系列方法:

getElementsGetTagName()

返回所有指定的html标签的元素,返回值是一个数组对象,如果匹配失败,返回[],后面所填的参数是想要获取节点的具体节点名称,就是标签名,例如:p标签,a标签等

getElementsClassName()

返回所有class名字符号指定条件的元素,返回值是一个数组的对象,匹配失败返回[],后面所填的参数是标签的class属性的值

getElementsByName()

选择填写了name属性的html元素,返回值是一个数组对象,如果匹配失败返回[],参数为标签中有name属性的标签;注意:使用时,最好选择原生具有name属性的元素

getElementById()    //注意:唯一一个Element后面不加s的方法

返回匹配指定id属性的元素节点,如果匹配不成功,则返回Null;参数为标签的id属性值,参数区分大小写;

 

节点的操作:

有时候,我们需要动态的去操作各种html的标签,那就需要用到节点的操作了,例如,创建一个标签元素,将标签元素套入某某标签元素中,都需要用到节点的操作:

document.createElement('标签名')

创建一个元素标签,参数为标签名

document.createTextNode(写入的内容)

用来生成文本节点,参数为需要写进的文本内容

node.appendChild()

将一个标签插入到另一个标签中作为他的最后一个子标签,参数为需要插入的标签对象

node.hasChildNodes()

判断当前标签是否有参数中的子标签,返回true或false

node.moveChild()

将参数中的子标签从标签中移除

node.innerText()

返回该元素包含的内容,可读可写

node.innerHTML()

返回该元素包含的html代码,可读可写