西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > 开发教程 > JavaScript教程 >

JavaScript对HTML DOM文档树的常用操作

时间:2016-01-21 13:15来源:未知 作者:好模板 点击:次
所有HTML元素都拥有的属性:id,title,lang,dir,className。 DOM集合： document.images 文档中所有图片集合 document.images[0] 等价document.images.item(0) 第一个图片 document.images.length 元素长度 JavaScript获取元

所有HTML元素都拥有的属性:id,title,lang,dir,className。

DOM集合：

  • document.images 文档中所有图片集合
  • document.images[0] 等价document.images.item(0) 第一个图片
  • document.images.length 元素长度

JavaScript获取元素的三种方法：

  • document.getElementById()
  • document.getElementByTagName()
  • document.getElementByClassName()
<!DOCTYPE html>
<html>
<head>
<style>
.box{
    width:500;
    height:500;
}
</style>
<script>
function f1(){
    var d1 = document.getElementById('d1');
    var d2 = document.getElementByTagName('div');
    var d3 = document.getElementByClassName('box');
}
</script>
</head>
<body onload = "f1()" >
    <div id="d1" class="box">
          <p>这只是一个例子</p>
    </div>
</body>
</html>

节点属性:

  • nodeName
  • nodeValue
  • nodeType 值为1-12. 1是元素节点；2是属性；3是文本节点
  • parentNode
  • childNode
  • firstNode
  • lastNode
  • previousSibling 前一个兄弟节点
  • nextSibling  后一个兄弟节点
  • attributes 属性集合
<!DOCTYPE html>
<html>
<head>
<script>
function f1(){
    var node = document.getElementById('d1');
    alert(node.nodeName);
}
</script>
</head>
<body onload = "f1()" >
    <div id="d1">
          <p>这只是一个例子</p>
    </div>
</body>
</html>

关于节点操作的方法：

  • createElement() 创建元素节点
  • createTextNode() 常见文本节点
  • createAttribute()创建属性节点
  • appendChild() 追加子节点
  • insertBefore() 在指定子节点前插入新子节点
  • removeChild() 删除子节点
  • replaceChild() 替换子节点
<!DOCTYPE html>
<html>
<head>
<script>
function f1(){ //给div追加一个段落
    var div = document.getElementById('d1');
    var newP = document.craeteElement('p');
    var textNode = document.createTextNode('This is an demo.');
    newP.appendChild(textNode);
    div.appendChild(newP);
}
</script>
</head>
<body onload = "f1()" >
    <div id="d1">
          <p>这只是一个例子</p>
    </div>
</body>
</html>

关于属性操作的方法：

  • getAttribute(attrName) 获取属性对应的值
  • setAttribute(attrName,value)
  • removeAttribute(attrName)
  • hasAttribute(attrName)  是否有某属性
(责任编辑：好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容
随机内容
随机模板
CopyRight © 2010-2023 好模板 ldhost.cn, All Rights Reserved.