# DOM基本增删改查操作

  1. 如何改变 HTML 元素的内容 (innerHTML) document.getElementById("p1").innerHTML="新文s本!";

  2. 如何改变 HTML 元素的样式 (CSS) document.getElementById('id1').style.color='red';

  3. 如何对 HTML DOM 事件作出反应

<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
  document.getElementById("demo").innerHTML=Date();
}
document.getElementById("myBtn").addEventListener("click", displayDate);
</script>
  1. 如何添加或删除 HTML 元素
  • 创建:
var para=document.createElement("p");

var node=document.createTextNode("这是一个新段落。");

para.appendChild(node);
  • 追加:
var element=document.getElementById("div1");

element.appendChild(para);
  • 删除:
var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);
  1. DOM操作一个元素的style
var oo = document.getElementById("leo");

oo.style.display='inline-block';

oo.style.border='1px solid red';
  1. DOM操作元素的属性
oo.attributes//获取element所有属性

oo.setAttribute('leo','taishuail');//设置leo属性

oo.getAttribute('leo');//获取leo属性

oo.hasAttribute('leo');//判断有没有leo属性

oo.removeAttribute('leo');//移除leo属性