JS對DOM元素的操作

</p><a >Hello jQuery<a><p>


獲取節(jié)點元素的方法:

document.getElementsByTagName("a")
獲取"<a>"或者"<p>"的列表。

var x=document.getElementsByName("myInput");

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />

document.getElementsByName("name"對應(yīng)的值)
該方法與 getElementById() 方法相似,但是它查詢元素的 name 屬性,而不是 id 屬性。


<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

使用getElementByName會匹配出很多個結(jié)果所以會是數(shù)組。

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(y[1].innerHTML);

修改HTML中id="demo"里的內(nèi)容:

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改變內(nèi)容

修改HTML的CSS-style:用對象.style.xxx的方式

x=document.getElementById("demo");
x.style.color="#00ff00";

獲取表單當(dāng)中的值:
d=document.getElementById("text");
d.value;           // 打印表單中對應(yīng)的值

添加DOM節(jié)點:

構(gòu)造新節(jié)點--->填充節(jié)點內(nèi)容--->

<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);      // appendChild 添加到標(biāo)簽內(nèi)部不是添加到他后面!。<div1><p></p></div1>
</script>
刪除DOM節(jié)點:

要先找到它的父親節(jié)點再清除它。

<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>

簡單版的操作:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);      //child.parentElement.

  var add_element=function()
  {
    tr=document.createElement("tr");
    if(stack.length>=3)
    {
      for(var i=0;i<3;i++)
      {
      var td=document.createElement("td");
      var node=document.createTextNode(stack.pop());
      td.appendChild(node);
      tr.appendChild(td);
      }
    }
    element=document.getElementsByTagName("table");
    element[0].appendChild(tr);
  };

  var delete_element=function()
  {
    element=document.getElementsByTagName("tr");
    if(element.length>10)
    {
        element[1].parentElement.removeChild(element[1])
    }
  }

  </script>

</head>

<body>
  <table id="spider">
  <tr>
  <th>店鋪名</th>
  <th>商品信息</th>
  <th>價格</th>
  </tr>

  </table>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容