javaScript的DOM（一）
DOM是Document Object Model的縮寫，簡稱文檔對象模型,，先來看一下DOM樹結構圖：javascript
經過 HTML DOM，可訪問 JavaScript HTML 文檔的全部元素。java
訪問HTML元素節點經常使用的有3種方式dom
1.經過 id 訪問 HTML 元素函數
document.getElementByIdcode
2.經過標籤名訪問 HTML 元素對象
document.getElementsByTagNameip
3.經過類名訪問 HTML 元素文檔
document.getElementsByClassNameget
<head>it
<title></title>
<p id="demo" class="hello">你好</p>
<p id="test">世界</p>
<script type="text/javascript">
//id
var p1=document.getElementById("demo");
console.log(p1);
var res1=p1.innerHTML;
console.log(res1);
//標籤名
var p2=document.getElementsByTagName("p");
console.log(p2);
var res2=p2[1].innerHTML;
console.log(res2);
//類名
var p3=document.getElementsByClassName("hello");
var res3=p3[0].innerHTML;
console.log(res3);
</script>
</head>
此外用className選擇元素.實現有2步
1.選出全部元素
2.經過className條件篩選
示例：將class="box"的li的背景顏色變爲紅色
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var i=0;
for(i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
運行結果：
封裝成函數
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl, 'box');
var i=0;
for(i=0;i<aBox.length;i++)
{
aBox[i].style.background='yellow';
}
}
</script>
實現效果和以前的效果是一致的
經過dom操做 改變HTML內容
1.改變 HTML 輸出流
document.write("hello");
2.改變 HTML 內容
document.getElementById("demo").innerHTML="51code";
3.改變HTML樣式
document.getElementById("test").style.background="red";
- 1. javaScript的DOM（一）
- 2. Javascript（十一）javascript DOM詳解
- 3. JavaScript 基礎&DOM（一）
- 4. [JavaScript]DOM擴展（一）
- 5. javaScript的DOM
- 6. JavaScript中的DOM
- 7. JavaScript中的Dom
- 8. javascript --- javascript與DOM
- 9. [DOM]javascript DOM操作
- 10. JavaScript Dom
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • Hibernate的一級緩存 - Hibernate教程
- • RxJava操作符（一）Creating Observables
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。