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 HTMLdocument.getElementById('id').innerText=new Text
(2)修改html属性
document.getElementById(id).attribute=新值;document.getElementById(id).setAttribute(属性, 值);
<script>
document.getElementById("image").src="landscape.jpg";
document.getElementById("image").setAttribute('src','landscape.jpg');
</script>
(3)改变样式
document.element.style.xxx=xxx
<p id="p1">我是段落，要变色</p>
<button>变色</button>
<script>
document.getElementsByTagName('button')[0].onclick=function(){
document.getElementById('p1').style.color="red";
}
</script>
(4)创建新的html元素
创建元素，然后追加到已有的元素上
<div class="d1"></div>
<script>
var para=document.createElement("p");
para.innerHtml="我是新添加的段落";
var element=document.getElementById("d1");
element.appendChild(para);//加在最后面
element.firstChild(para);//加在第一个
</script>
