zoukankan      html  css  js  c++  java
  • DOM基础。

    今天老师给我们讲了DOM的基础与应用,这部分相比起来还是很重要的。课后要进行整理,并且多加练习。

    <body>
    		<div id="div1"></div>
    		<div class="div2"></div>
    	</body>
    </html>
    <script>
    DOM  Document Object Model 文档对象模型
    第一步:取对象
    var div1 = document.getElementById('div1');
    var div2 = document.getElementsByClassName('div2')[0];
    var div3 = document.getElementsByTagName()//标签选择器
    var div4 = document.getElementsByName()name//选择器
    alert(div1); //object HTMLDivElement
    第二步:操作对象
    1,改内容
    	div1.innerHTML = "<b>加粗</b>"
    	div2.innerText = "<b>加粗</b>";
    2,改样式
    	div1.style.color = "red";
    	div1.style.fontFamily = "华文彩云";
    3,改属性
    	div1.setAttribute('class','class1')
    	div1.removeAttribute('style');
    4,加事件
    	div1.onclick = function(){
    		alert("点击事件触发");
    		div1.setAttribute('class','class2');
    	}
    	
    	
    	
    	
    造元素
    	var new_div = document.createElement('div');
            改样式/改内容.....
    	new_div.innerHTML = "新元素";
    	document.body.appendChild(new_div);//增加
    	document.body.removeChild(new_div);//删除
    </script>
    
  • 相关阅读:
    javaScript学习日记 1 数组
    总结css中单位px和em,rem的区别
    读书摘要
    读书摘要
    各种官方网站汇集
    js相关参考资料
    Node相关参考资料
    Angular【学习笔记】
    Node连接MySQL
    em 和 px相互转换
  • 原文地址:https://www.cnblogs.com/gbbwzz/p/7594031.html
Copyright © 2011-2022 走看看