JavaScript学习之DOM入门（获取元素、document对象）

前言

先来看一下JavaScript的组成部分：

本文针对DOM进行学习了解。

什么是DOM？

DOM(Document Object Model):文档对象模型，是w3c制定的一套针对HTML和XML的标准的编程接口

把HTML文档处理成树形结构(倒立的树)，将一个html文档看作是一棵树，文档中的标签、标签的属性、标签的内容都是这课树的节点。

强调：DOM的最顶端是----document

1、文档(document):可以把一个页面当成一个文档

2、元素(element):文档中的所有标签

3、节点(node)：每个节点都是对象，都有属性和方法(函数)

获取文档中的元素

根据id获取

方法：

document.getElementById('id号')

例如：

<div id="box">你好</div>

var obox=document.getElementById('box').innerHTML
console.log(obox)

根据标签名获取

方法：

document.getElementsByTagName(标签名)

例如：

<div id="d1">星星</p>

var arr = document.getElementsByTagName('div')
console.log(arr)

根据name获取

方法：

document.getElementsByName('name属性值')

例如：

<label>
    <input type="checkbox" name="fruit" value="苹果">
    苹果
</label>
<label>
    <input type="checkbox" name="fruit" value="香蕉">
    香蕉
</label>
<label>
    <input type="checkbox" name="fruit" value="樱桃">
    樱桃
</label>

var fruits=document.getElementsByName('fruit') //返回值是一个集合
console.log(Array.isArray(fruits))    //不是数组，所以输出false 

根据class获取

方法：

document.getElementsByClassName('class属性值')

例如：

<span class="one">语文</span>

 var s1=document.getElementsByClassName('one')
 

根据选择器获取

（1）querySelector(‘选择器’)：获取的是给定选择器的元素

（2）querySelectorAll(‘选择器’)：返回的是元素的集合

例如：

var firstdiv=document.querySelector('.box')  //类选择器

var divs=document.querySelectorAll('.box')  //获取所有的类名为box的的标签

var nav=document.querySelector('#nav')  //id选择器

var li=document.querySelector(li)   //标签选择器

document对象属性

document对象提供了一些属性，可用于获取文档中的元素。

例如：

document.title = '设置新标题';	           // 设置页面标题
console.log(document.title);