JavaScript中HTML的DOM
1.1DOM简介
1.2获得元素
<div id="intro"></div>
<div id="main">
<p>My Name</p>
</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<script type="text/javascript">
var intro = document.getElementById("intro");
var main = document.getElementById("main");
var p = main.getElementsByTagName("p")[0];
var content1 = document.getElementsByClassName("content")[0];
</script>
2.DOM-HTML
2.1修改HTML内容
document.getElementById(id).innerHTML=‘HelloWorld‘;
2.2修改HTML属性
<body>
<div id="main" data="first">123</div>
<img id="image" src="1.png">
<a id="goUrl" href=""/>1
<script type="text/javascript">
var main = document.getElementById(‘main‘);
main.innerHTML = ‘HelloWorld‘;
alert(main.getAttribute(‘data‘));
main.setAttribute(‘data‘,‘second‘);
var image = document.getElementById(‘image‘);
image.src=‘2.png‘;
var goUrl = document.getElementById(‘goUrl‘);
goUrl.href=‘https://www.baidu.com‘;
</script>
</body>
3.DOM-CSS
3.1修改样式
4.DOM事件
<body>
<div id="main" onclick="this.innerHTML=‘wow!!‘">hello</div>
<div id="nav">world</div>
<div id="boo">!</div>
<script type="text/javascript">
var nav = document.getElementById(‘nav‘);
nav.onclick = function () {
alert(‘world‘);
}
var boo = document.getElementById(‘boo‘);
boo.addEventListener(‘click‘,function () {
alert(‘!‘);
});
</script>
</body>
5.DOM节点
5.1添加删除节点
<body>
<div id="div1">
<p>hello</p>
<p>world</p>
</div>
<script type="text/javascript">
var div1 = document.getElementById(‘div1‘);
var p = document.createElement(‘p‘);//<p></p>
var nono = document.createTextNode(‘nono‘);//nono
var _p = p.appendChild(nono);//<p>nono</p>
div1.appendChild(_p);
div1.removeChild(_p);
</script>
</body>
原文：https://www.cnblogs.com/yangHS/p/10848802.html