JavaScript中HTML的DOM
1.1DOM简介
1.2获得元素
- document.getElementById()
- document.getElementByTagName()
- document.getElementByClassName()
-
<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属性
-
- element.getAttribute()
- element.setAttribute()
- element.src
- element.href
<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修改样式
-
- document.getElementById(' ').style.color=' ';
4.DOM事件
-
- <h1 onclick="this.innerHTML='谢谢！'">请点击该文本</h1>
- Element.onclick=function(){displayDate()};
- Element.addEventListener("click",function(){
- });
-
<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添加删除节点
-
- document.createElement("p");
- document.createTextNode("新增")
- parent.appendChild(child);
- parent.removeChild(child);
<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>