javascript-DOM基础教程

学习了Javascript基础语法是不够的，JavaScript的核心是DOM：document object model (文档对象模型)，，

实际开发中，有时候需要实现一些特效，这时候就要借助dom技术，DOM也是学习jQuery HTML5的基础。

 

 

DOM结构：
DOM采用的是”树型结构“，对于一个html文件，DOM会将其解析为树型结构：如图

节点类型 ：

以代码为例子

小新天下无敌

一个简单的div标签 ，整个

整体可以看作是一个元素，一个元素节点。id="aa"则被称为属性节点， 小新天下无敌则叫做文本节点。

获取元素：

一般使用以下几种获取方式

1.getElementById()

2.getElementsByTagName()

3.getElementByClassName()

4.querySelector()和querySelectorAll()【新加的 可以直接使用css的选择语句例如#aa{}】

5.getElementsByName()

6.document.title和document.body

注意大小写 要求比较严格哦 getelement和getElement是有区别的！

使用getElementById()

时，要注意 很多时候我们将Javascript代码放置在html代码上面，由于浏览器是由上往下解析页面的，所以通常要加入window.onload，例如

window.onload=function()
{
....
}
//这样子 浏览器就会在解析完毕之后在获取元素  否则 直接获取元素，而元素还未被解析 就会报错

getElementById()只能获取单个元素，而getElementsByTagName()可以获取多个多个元素

getElementById()不能操作动态创建的DOM而getElementsByTagName()可以操作动态创建的DOM

而想用class获取元素 简单理解就是将代码中的ById换成ByClassName() ，getElement的Element加s变成复数就是选择所有元素 有一点英语基础就能理解！

2.getElementsByTagName():

只用于表单元素，一般只用于单选按钮和复选框.,只有表单使用name属性，可以使用下标进行精确选择 举个例子：

假设有个

，它里面有个单选按钮 name属性为a, 我们用js让它动态的被选中就可以这样子写 

var xx= document.getElementsByTagName("a")

xx[0].checked=true;

复选框也是同样的道理！

3.document.title 和document.body

由于一个页面只有一个title和body,所以可以使用这两个语句进行动态的创建

举个例子：

//我这里直接写的  给大家用的 举例子  正常时候要写进里面哦
window.onload=function(){
document.title="小新天下无敌"
}
//body也是同样道理哦

4.创建动态元素：写了半天有点累 ，休息一下 ，还会继续更新DOM创建简单复杂元素，以及DOM进阶，以及欢迎大家点赞关注评论哦！