js DOM操作

js

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(属性, 值);

<img id="image" src="smiley.gif">
<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>