DOMのいくつかの小さな例
4086 ワード
<script type="text/javascript">
//document.getElementsByTagName();
function SearchDom(){
// li
var oli=document.getElementsByTagName("li");
// , , .
alert(" :"+oli.length+" :"+oli[0].tagName+" li :"+ oli[3].childNodes[0].nodeValue);
var oul=document.getElementsByTagName("ul");
var ol2=oul[1].getElementsByTagName("li");
alert(" :"+ol2.length+" :"+oli[1].tagName+" :"+ol2[1].childNodes[0].nodeValue);
}
</script>
</head>
<body onload="SearchDom()">
<ul>
<li>HTML</li>
<li>Javascript</li>
<li>Css</li>
</ul>
<ul>
<li>asp.net</li>
<li>jsp</li>
<li>php</li>
</ul>
</body>
</html>
<script type="text/javascript">
//document.getElementById();
function SearchDom(){
var myid=document.getElementById("myid");
alert(myid.tagName+" "+myid.childNodes[0].nodeValue);
}
</script>
</head>
<body onload="SearchDom()">
<ul>
<li>HTML</li>
<li>Javascript</li>
<li id="myid">Css</li>
</ul>
<ul>
<li>asp.net</li>
<li>jsp</li>
<li>php</li>
</ul>
</body>
</html>
<script type="text/javascript">
/* : Dom , */
/* DOM , , HTML , DOM */
function MyDOMInspector(){
var str="";
var myList=document.getElementById("myList");
if(myList.hasChildNodes())
var child=myList.childNodes;
for(var i=0;i<child.length;i++)
str+=child[i].childNodes[0].nodeValue+"
";
//str+=child[i].tagName+"
";
//str+=child[i].nodeName+"
";
alert(str);
}
</script>
</head>
<body onload="MyDOMInspector()">
<ul id="myList">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>
<script type="text/javascript">
/* */
function property(){
var img=document.getElementsByTagName("img")[0];// DOM
alert(img.getAttribute("title"));
}
</script>
</head>
<body onload="property()">
<img title=" " src="file:///D|/ /My Pictures/Sunset.jpg"/>
</body>
</html>
<script type="text/javascript">
/* */
function createP(){
var newP=document.createElement("p");
var text=document.createTextNode(" !");
newP.appendChild(text);
document.body.appendChild(newP);
}
</script>
</head>
<body onload="createP()">
<p> !</p>
</body>
</html>
<script type="text/javascript">
/*InnerHTML */
function test(){
var mydiv=document.getElementById("mydiv");
alert(mydiv.innerHTML);
mydiv.innerHTML="<span> !</span>"
}
</script>
</head>
<body onload="test()">
<div id="mydiv">
!
</div>
</body>
</html>