2、 添加 /删除 / 修改 / 获取 Element类型
1) 获取 HTML 元素 :
ü getElementById()
ü getElement s ByName()
ü getElement s ByTagName() :返回带有指定标签名的所有元素
ü getElement s ByClassName() : Internet Explorer 5,6,7,8 中无效。
document.getElementById("main").getElementsByTagName("p");
返回包含文档中所有
元素的列表,并且这些
元素应该是 id="main" 的元素的后代(子、孙等等)
2) 创建 HTML 元素 :
createElement() : 创建元素节点。
This is a paragraph.
This is another paragraph.
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
3) 添加 HTML 元素:
appendChild() :将新元素作为父元素的最后一个子元素进行添加。
insertBefore() :
This is a paragraph.
This is another paragraph.
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
4) 删除已有的 HTML 元素:
removeChild(child):必须清楚该元素的父元素
This is a paragraph.
This is another paragraph.
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
提示:能否在不引用父元素的情况下删除某个元素?
很抱歉。 DOM 需要了解您需要删除的元素,以及它的父元素。
这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
5) 替换 HTML 元素:
parent.replaceChild(替换后的 , 替换前的 ) :
This is a paragraph.
This is another paragraph.
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
3、 添加 /删除 / 修改 / 获取 Element 类型的 属性
ü attributes
ü 直接将属性名当做元素对象的属性访问(但 class属性不起作用,需改用 className )
1)创建 HTML 属性: createAttribute():创建新的 Attr 节点。
createAttribute(name)
抛出:如果 name 参数中含有不合法的字符,该方法将抛出代码为 INVALID_CHARACTER_ERR 的 DOMException 异常。
2)获取 HTML 属性: getAttribute() :返回指定属性名的属性值
element.getAttribute(attributename)
3)设置 / 修改 HTML 属性: s etAttribute():添加指定的属性,并为其赋指定的值。
element.setAttribute(attributename,attributevalue)
注释: Internet Explorer 8 以及更早的版本不支持此方法。
4) 删除 HTML 属性: removeAttribute( “ style ” )(彻底删除 ) ;
4、 添加 /删除 / 修改 / 获取 CSS 样式 :
1) 添加 /删除 / 修改 / 获取 内联 style:
nodeName. style .fontWeight:
注意:通过 nodeName. style 返回的数据类型是 Object:
2) 添加 /删除 / 修改 / 获取 class属性:
nodeName. className ="class1";
.hide{display:none;}
Hide the text
text
document.getElementById("hide").οnclick=function(){
document.getElementById("target").className="hide";
};
3) 以元素属性的方式添加 /修改 / 获取样式:
获取: nodeName .getAttribute( “ style ” )(返回的数据类型是 string ) ;
添加 /修改: nodeName .setAttribute( “ style ” ,attributevalue);
nodeName .setAttribute( “ class ” ,attributevalue);
.hide{display:none;}
Hide the text
text
document.getElementById("hide").οnclick=function(){
document.getElementById("target").setAttribute("class","hide");
};
删除: removeAttribute(“ style ” )(彻底删除 ) ;
5、 添加 /删除 / 修改 / 获取 HTML文本 :
1) 添加 / 修改 / 获取 HTML 文本: innerHTML 属性 :对于获取或修改 HTML 元素的内容很有用
2) 创建 HTML 文本 : createTextNode()
3) 添加 HTML 文本: appendChild()
4) 删除 HTML 文本: removeChild()
六、 说明:
document对象给定的就是当前所访问的文档
document.documentElement表示 html 标签
获取 body的快捷方式: document.body
获取表单元素的快捷方式: document.forms[0].elements[0]
标签属性: .tagName;
hasChildNodes()
hasAttributes()