js DOM操作

1.认识DOM

在网页正常加载的时候，浏览器会创建页面的文档对象类型(Document Object Model)

• javascript能改变页面中的html元素
• javascript能改变页面中的html属性
• javascript能改变页面中的css样式
• javascript能对页面中的事件作出反应

2.查询元素

• document.getElementById(' ');
  返回匹配制定的ID属性的元素节点

• document.getElementsByClassName(' ');
  返回一个类似数组的对象

• document.getElementByTagName(' ');
  返回所有指定标签的元素

• document.querySelector( );
  querySelector()返回匹配指定的css选择器的元素节点,如果有多个节点满足匹配条件,则返回第一个匹配的节点,如果没有发现匹配的节点,则返回null

 var el1=document.querySelector(".kk");
 var el2=document.querySelector('#id>.kk');
 querySelector无法选中css的伪类.括号内单双引都可

• 3.document.querySelectorAll();
  querySelectorAll()返回匹配指定的css选择器的元素的所有节点,返回的是NodeList类型的对象.NodeList不是动态的集合,不能实时反映到结果中.
  querySelectorAll(".ll,.oo,.pp")方法的参数,可以是用逗号分割的多个css选择器.返回所有匹配其中一个选择器的元素.

var maths=document.querySelectorAll("div.kk,div.alert");
这段代码返回Clss属性是kk和alert的div元素

3.DOM修改添加

(1)修改html内容

• document.getElementById('id').innerHTML=new HTML
• document.getElementById('id').innerText=new Text

(2)修改html属性

• document.getElementById(id).attribute=新值;
• document.getElementById(id).setAttribute(属性, 值);

![](smiley.gif)

(3)改变样式

document.element.style.xxx=xxx

我是段落，要变色
变色

(4)创建新的html元素

创建元素，然后追加到已有的元素上