當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript中HTML的DOM
生活随笔
收集整理的這篇文章主要介紹了
JavaScript中HTML的DOM
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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
?3.DOM-CSS
3.1修改樣式
-
- document.getElementById(' ').style.color=' ';
?4.DOM事件
-
- <h1 οnclick="this.innerHTML='謝謝！'">請點擊該文本</h1>
- Element.οnclick=function(){displayDate()};
- Element.addEventListener("click",function(){
- });
- <body><div id="main" οnclick="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);
轉載于:https://www.cnblogs.com/yangHS/p/10848802.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的JavaScript中HTML的DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript发布订阅者模式
- 下一篇： 惊了！7 行代码优雅地实现 Excel