HTML DOM (文件格式第一类数学模型)
当页面被读取时，应用程序会建立页面的文件格式第一类数学模型（Document Object Model）。
HTML DOM 表述了用作 HTML 的一连串国际标准的第一类，和出访和处理 HTML 文件格式的国际标准方式。透过 DOM，你能出访大部份的 HTML 原素，与及它所包涵的文档和特性。
HTML DOM 数学模型被内部结构为第一类的树：
搜寻 HTML 原素
//透过 id 搜寻 HTML 原素 var x=document.getElementById(“intro”); //透过条码名搜寻 HTML 原素 var x=document.getElementById(“main”); vary=x.getElementsByTagName(“p”); //透过Pthreads找出 HTML 原素 var x=document.getElementsByClassName(“intro”);HTML DOM 发生改变 HTML 文本
//发生改变 HTML 输入流 document.write(Date()); //当然千万别在文件格式读取顺利完成后采用,用btn点选该事件继续执行 document.write()。这会全面覆盖该文件格式。 //发生改变 HTML 文本 document.getElementById(id).innerHTML=new HTML //发生改变 HTML 特性 document.getElementById(id).attribute=new valueHTML DOM 发生改变 CSS
//发生改变 HTML 样式 document.getElementById(“p2”).style.color=“blue”; document.getElementById(“p2”).style.fontFamily=“Arial”; document.getElementById(“p2”).style.fontSize=“larger”; <h1 id=“id1”>我的标题 1</h1> <button type=“button” onclick=“document.getElementById(id1).style.color=red”> 点我!</button>HTML DOM 该事件
//对该事件做出反应 <h1 onclick=“this.innerHTML=Ooops!”>点选文档!</h1> <script> function changetext(id){ id.innerHTML=“Ooops!”; } </script> </head> <body> <h1 onclick=“changetext(this)”>点选文档!</h1> </body> //HTML 该事件特性 <body> <p>点选按钮继续执行 <em>displayDate()</em> 函数.</p> <button onclick=“displayDate()”>点我</button> <script> function displayDate() { document.getElementById(“demo”).innerHTML=Date(); }</script> <p id=“demo”></p> </body> //采用 HTML DOM 来分配该事件 document.getElementById(“myBtn”).onclick=function(){displayDate()}; //onchange 该事件 <script> function myFunction(){ var x=document.getElementById(“fname”); x.value=x.value.toUpperCase(); } </script> </head> <body> 输入你的名字: <input type=“text” id=“fname” onchange=“myFunction()”> <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p> </body>HTML DOM 该事件监听器
//addEventListener() 方式 <body> <p>该实例采用 addEventListener() 方式在按钮中添加点选该事件。 </p> <button id=“myBtn”>点我</button> <p id=“demo”></p> <script> document.getElementById(“myBtn”).addEventListener(“click”, displayDate);function displayDate() { document.getElementById(“demo”).innerHTML = Date(); } </script> </body> //向原原素添加该事件句柄 <body> <p>该实例采用 addEventListener() 方式在按钮中添加点选该事件。 </p> <button id=“myBtn”>点我</button> <script> document.getElementById(“myBtn”).addEventListener(“click”, function(){ alert(“Hello World!”); }); </script> //向同一个原素中添加多个该事件句柄 <body> <p>该实例采用 addEventListener() 方式向同个按钮中添加两个点选该事件。</p> <button id=“myBtn”>点我</button> <script> var x = document.getElementById(“myBtn”); x.addEventListener(“click”, myFunction); x.addEventListener(“click”, someOtherFunction); function myFunction() { alert (“Hello World!”) } function someOtherFunction() { alert (“函数已继续执行!”) } </script> </body>HTML DOM 原素
在文件格式第一类数学模型 (DOM) 中，每个节点都是一个第一类。DOM 节点有三个重要的特性，分别是：
nodeName : 节点的名称nodeValue ：节点的值nodeType ：节点的类型建立新的 HTML 原素
<body> <div id=“div1”> <p id=“p1”>这是一个段落。</p> <p id=“p2”>这是另一个段落。</p> </div> <script> var para=document.createElement(“p”); var node=document.createTextNode(“这是一个新段落。”); para.appendChild(node); var element=document.getElementById(“div1”); element.appendChild(para);</script>删除已有的 HTML 原素
<body> <div id=“div1”> <p id=“p1”>这是一个段落。</p> <p id=“p2”>这是另一个段落。</p> </div> <script> var parent=document.getElementById(“div1”); var child=document.getElementById(“p1”); parent.removeChild(child); </script> </body>以上文本整理于网络，如有侵权请联系删除。
