文档对象模型(DOM)
来源:互联网 发布:stm32 const 数组 编辑:程序博客网 时间:2024/05/17 07:27
DOM(Document Object Model):文档对象模型,它定义了访问和处理HTML文档的标准方法,允许程序和脚本动态地访问和更新文档的内容、结构和样式。
一. DOM节点:
DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
节点父、子和同胞:
二. 获取节点对象的方法:
1.. getElementsByName(name)
返回带有指定名称的节点对象的集合
var element=document.getElementsByName("alink");
2.. getElementById(ID)
返回带有指定 ID 的元素对象
var element=document.getElementById("header");
3.. getElementsByTagName(tagname)
返回带有指定标签名的节点对象的集合,返回元素的顺序是它们在文档中的顺序。
var element= document.getElementsByTagName("input")
4.. getElementsByClassName(classname)
返回包含带有指定类名的节点对象的集合
var element= document.getElementsByClassName("alink")
三. 节点的属性:
nodeName 属性: 节点的名称,是只读的。
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 是属性的名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
nodeValue 属性:节点的值
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本自身
- 属性节点的 nodeValue 是属性的值
- nodeType 属性: 节点的类型,是只读的。
常用的几种结点类型:
元素类型–节点类型
元素 ———1
属性———-2
文本———-3
注释———-8
文档 ———9 - innerHTML属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用,它在JS是双向功能:获取对象的内容或向对象插入内容
如:<div id="aa">这是内容</div>
,我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容;
也可以对某对象插入内容,如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。
对节点属性的两种操作:
1.. getAttribute()方法
通过元素节点的属性名称获取属性的值。
//获取li节点的title属性的值 var con=document.getElementsByTagName("li"); var text = con.getAttribute("title")
2.. setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值
//将li节点title属性的值设为“哈哈哈” var con=document.getElementsByTagName("li"); var text = con.setAttribute("title","哈哈哈")
四. 增删节点:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type"><title>无标题文档</title></head><body><ul id="test"> <li>JavaScript</li> <li>css</li> <li>HTML</li></ul> <script type="text/javascript"></script> </body></html>
1.. 插入节点
appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点。
//在li列表后加入新的li选项“PHP” var otest = document.getElementById("test"); //获取节点列表 var newnode = document.createElement("li"); //注意先创建这个节点 newnode.setAttribute("style","color: red;"); //setAttribute方法设置节点属性 newnode.innerHTML="PHP" //添加节点文本 otest.appendChild(newnode) //节点列表之后添加新的节点
insertBefore(newnode,node) 方法可在已有的子节点前插入一个新的子节点
//最后一个节点之前加入新的li选项“PHP” var otest = document.getElementById("test"); var node= otest.lastChild; //取到标志节点 var newnode = document.createElement("li"); //注意先创建这个新节点 newnode.innerHTML="PHP"; //添加新节点文本 otest.insertBefore(newnode,node); //标志节点之前添加新的节点
2.. 删除节点
removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
//删除第一个节点var otest = document.getElementById("test"); //父结点otest.removeChild(otest.childNodes[1]); //删除子节点
3..替换元素节点
replaceChild() 实现子节点(对象)的替换。返回被替换对象的引用。
var otest = document.getElementById("test"); newnode=document.createElement("li"); //先创建新节点 newnode.innerHTML="PHP" //添加节点文本 otest.replaceChild(newnode,otest.childNodes[1]); //替换
- 文档对象模型(DOM)
- 文档对象模型(DOM)
- 文档对象模型(DOM)
- DOM(文档对象模型)
- DOM(文档对象模型)
- DOM(文档对象模型)
- 文档对象模型(DOM)
- DOM(文档对象模型)
- DOM-文档对象模型
- 文档对象模型DOM
- DOM(文档对象模型)
- DOM 文档对象模型
- DOM 文档对象模型
- DOM文档对象模型
- 文档对象模型DOM
- 文档对象模型 (DOM)
- DOM(文档对象模型)
- DOM-----文档对象模型
- Linux下创建DHCP服务器
- JavaScript-函数篇-001(Javascript变参函数)
- node ffi调用C、C++动态库出现的问题
- JAVA--数据库
- jsp配置百度编辑器细节
- 文档对象模型(DOM)
- springMvc简单总结
- 【设计模式】——工厂方法
- 自己整理CRC16(表查询法) 笔记
- [C++]类xml数据格式解析
- C标准库学习--错误处理
- JAVA中的异常和处理
- Android Audio System 架构初探(好文)
- 18005 It is not ugly number