Dom简介

目录

一.Dom概念

二.Dom“树”形结构

三.如何操作Dom对象

一.Dom概念
JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。

它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

二.Dom“树”形结构

三.如何操作Dom对象
1.如果用js操作html文档，先要将html转成JS DOM对象

<a href=“http://www.sina.com” id=“link” 
title=”新浪”>
      新浪
</a>
//获取dom对象
Var obj=document.getElementById(“link”);   

2.DOM对象操作方法
01.操作属性
​DOM自带的属性如:

<a href=“http://www.sohu.com”  title=“搜狐”  target=”_blank”  id=”link”> 
     搜狐
</a>
<p align=”center”></p>
<img src=“image/1.jpg” alt=“pic” />
<table border=“0” cellpadding=“0” cellspacing=“0”…>
	<tr height=“30”>
                      <td align=“center”></td>
                        ………
              </tr>
</table>

02.操作内容
InnerText:操作内部的文本，任何标签只当做文本处理
兼容性:innerText(IE) textContent(FF)[兼容IE低版本的浏览器]
InnerHTML(荐 兼容性好)：可带标签格式
兼容性：可同时兼容IE与FF
outerHTML取文本元素外围的标签

03.操作表单值
Document.formname.elementname.value=…
Document.forms[0]. Elementname.value=…
Document.forms[0].Element[num].value=…

04.操作样式
操作内部样式：
obj.style.textDecoration=“none”;
obj.style.fontSize=“14”;
obj.style.color=“#000”;
注：需要将CSS中的横线按照驼峰法则书写
text-decoration应写成textDecoration

操作外部样式:
Obj.className=”stylename”
Obj.className=”style1 style2”
Obj.className=””//清空类

05.找到DOM的方法
1:ID document.getElementById(“ID名”);
2:name document.form1.user.value; (表单)
document.forms[0].input[0].value
document.getElementsByName(“name名”)
3:TAG document.getElementsByTagName(“标签名”);
4:class document.getElementsByClassName(“类名”);
5:querySelector/querySelectorAll
querySelector:获取元素中的第一个
　　　　querySelectorAll：获取所有元素