跟我学JavaScript--HTML DOM--DOM访问，修改，元素

DOM访问

访问HTML DOM ：查找HTML元素

访问HTML元素=访问节点
访问HTML元素的方式：

• 使用getElementById()方法
• 使用getElementsByTagName()方法
• 使用getElementsByClassName()方法

getElementById()方法

作用：返回带有指定ID的元素引用

语法：node.getElementById(“id”);

getElementsByTagName()方法

作用：返回带有指定标签名的所有元素

语法：node.getElementsByTagName(“p”);

例.

document.getElementById("demo").getElementsByTagName("p");   //返回文档中所有id="demo"的元素的后代元素中标签为p的所有元素

getElementsByClassName()方法

作用：返回指定类名的所有HTML元素

语法:node.getElementsByClassName(“demo”);

注：此方法IE5，6，7，8，中无效

DOM 修改

修改HTML=改变元素，属性，样式和事件

修改HTML元素：

• 改变HTML内容
• 改变CSS样式
• 改变HTML属性
• 创建新的HTML元素
• 删除已有的HTML元素
• 改变事件（处理程序）

改变HTML内容

改变元素内容的方法之一：使用innerHTML属性

改变HTML样式

语法： Object.style.property = new style;

基本属性：

document.getElementById("demo").style.color="red";   //改变id为demo的字体颜色
document.getElementById("demo").style.fontSize="larger";   //改变id为demo的字体大小

1.显示和隐藏（display属性）：

语法：Object.style.display=value;

value有两个取值：

• none 此元素不会被显示，即隐藏
• block：此元素被显示为块级元素，即显示

document.getElementById("demo").style.display="none";

2.控制类名（className属性）
className属性设置或返回元素的class属性

语法：Object.className = classname;

作用：

• 获取元素的class属性
• 为某个元素指定样式更改元素外观

例.

<p id="con" class="one">Hello</p>

<script>
    document.getElementById("con").className="two";   
</script>

DOM元素

创建新的HTML元素

• createElement()
  首先创建元素节点，然后添加到已有的元素上

例.

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

运行结果：

• appendChild()
  将新元素作为指定父元素的最后一个子元素进行添加

• insertBefore()
  将新元素作为指定父元素的子元素，指定子元素前面的元素进行添加

例.

<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");
var child=document.getElementById("p2");
element.insertBefore(para,child);
</script>

运行结果：

删除已有的HTML元素

使用removeChild()方法

语法：parent.removeChild(child);

如需删除HTML元素，必须知道该元素的父元素

例.

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

运行结果：

可通过找到需要删除的子元素，然后使用parentNode属性来查找其父元素：

child.parentNode.removeChild(child);

替换HTML元素

使用replaceChild()方法

语法：parent.replaceChild(tihuan,beitihuan);

例.

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

运行结果：