dom对象详解-document对象

1. dom对象详解-document对象

dom编程最重要的一个对象

最复杂的

document对象代表的是整个html文档，因此可以访问到文档中的各个对象（元素）。

是学习dom编程的一个最关键所在

1. 常用函数

1. write() 

这个是向文档输出文本或是js代码

1. writeln（）

• 这个也 是向文档输出文本或是js代码，
• 不同的是多一个换行符。但是实际上对于浏览器来说，输出效果并没有区别。
• 可在每个表达式后写一个换行符

1. getElementById()

1. 规定html文档中 id 号要唯一，
2. 如果不唯一，则只取第一个元素

2. id号不要用数字开头，

案例：

 

连接到baidu

连接到sohu

连接到163

1. getElementsByName()  

• 注意是Elements 不是 Element
• 复选框，要求id号一样，getElementById()就不好用了
• 通过getElementByName()返回对象集合
• 集合中规模也是length，这点和Java不同

案例：

 

请选择你的爱好

name="hobby" value="足球"/> 足球

name="hobby" value="旅游"/> 旅游

name="hobby" value="音乐"/> 音乐

 

1. getElementsByTagName()  

场景：想获得input控件有哪些，这个时候靠名字也拿不到

通过标签名来获取对象（元素）

将来做编程，会遇到各种问题，少一个知识点，都得去问别或者是查资料

html编程就是元素，dom编程就是对象了

综合案例：

 

连接到baidu

连接到sohu

连接到163

 

请选择你的爱好

 足球

 旅游

 音乐

下面再来看几个重要的函数

这几个在文档中没有

可以动态操作html文档的

dom分为5级

1. createElement() 

动态的创建节点html（元素）

1. appendChild() 

动态的添加节点（元素）

1. removeChild() 

动态的删除节点（元素）

如何动态的创建 ，删除 html元素

举例说明：

动态的添加元素到document文档中，动态的删除document中的元素

 

div1