document,element,dom对象api详解
Document对象:
- 根元素的访问,也就是HTML标签的访问。使用document.documentElement访问根对象。
- 使用Document对象查找对象
- getElementById():通过节点的id属性,查找对应节点。
- getElementsByName():通过节点的name属性,查找对应节点。
- getElementsByTagName():通过节点名称,查找对应节点。
- 使用Document对象的方法创建节点:
- crateElement(tagName):创建元素节点。
- createTextNode(data):创建文本节点。
- createAttirbute(name):创建属性节点。(不使用)
Element对象:
- 操作Element对象的属性:
- 获取属性:getAttribute(name);方法
- 设置属性:setAttribute(name,value)方法。
- 删除属性:removeAttribute(name);方法。
- 在Element对象中查找Element对象:
- 在Element对象的范围内,可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合。
Element对象的一个案例:
- 在一个<ul></ul>标签下创建一个li标签
- <body>
- <ul id="city">
- <li id="bj" name="beijing">北京</li>
- <li id="tj" name="tianjin">天津</li>
- </ul>
- <script type="text/javascript">
- //创建一个标签元素
- var liElment = document.createElement("li");
- //创建一个文本节点
- var textElement = document.createTextNode("上海");
- //将文本节点加到标签元素下面
- liElment.appendChild(textElement);
- //为标签元素创建属性
- liElment.setAttribute("id","sh");
- liElment.setAttribute("name","Shanghai");
- //将标签元素加到ul标签下
- document.getElementById("city").appendChild(liElment);
- </script>
- </body>
Node对象包含:
- 节点名称,值和类型。
- 父节点,子节点和同辈节点。
- 节点属性
- 检测子节点和属性。
- 操纵Dom节点树。
- 复制和移动节点。
节点名称,值和类型:
- nodeName:其内容就是给节点的名称。
- 如果是元素节点,nodeName返回这个元素的名称。
- 如果是属性节点,nodeName返回这个属性的名称。
- 如果是文本节点,nodeName返回这个内容为#text的字符串。
- nodeType:返回一个整数,这个数值代表给点节点的类型。
- Node.ELEMENT_NODE:1,元素节点。
- Node.ATTRIBUTE_NODE:2,属性节点。
- Node.TEXT_NODE:3,文本节点
- nodeValue:返回给定节点的当前值(字符串):
- 如果给定节点是一个元素节点:返回null。
- 如果给定节点是一个属性节点:返回属性的值。
- 如果给定节点时一个文本节点:返回文本节点的内容。
- 下面是使用的示例:
- <body>
- <ul id="city">
- <li id="bj" name="beijing">北京</li>
- <li id="tj" name="tianjin">天津</li>
- </ul>
- <p>
- 你好
- </p>
- <script type="text/javascript">
- var bj = document.getElementById("bj");
- //元素节点
- // alert(bj.nodeName);//li
- // alert(bj.nodeType);//1
- // alert(bj.nodeValue);//null
- //属性节点
- // var name = bj.getAttributeNode("name")
- // alert(name.nodeName); //name
- // alert(name.nodeType); //2
- // alert(name.nodeValue); //beijing
- var p = document.getElementsByTagName("p")[0];
- var text = p.childNodes[0];
- alert(text.nodeName);//#text
- alert(text.nodeType);//3
- alert(text.nodeValue);//你好
- </script>
- </body>
父节点,子节点和同辈节点:
- 父节点:parentNode:
- parentNode返回的永远都是一个节点,因为只有元素节点才有可能包含子节点。
- document节点没有父节点。也就是文档节点没有父节点,也就是HTML
- 子节点:childNode:
- childNodes,获取指定节点的所有子节点。其实上个例子已经使用了。
- firstChild:指定第一个子节点。
- lastChild:指定最后一个子节点。
- 同辈节点:
- nextSibling:返回一个给定节点的下一个兄弟节点。
- previousSibling:返回一个节点的上一个兄弟节点。
- 示例如下:
- <body>
- <ul id="city">
- <li id="bj" name="beijing">北京</li>
- <li id="tj" name="tianjin">天津</li>
- </ul>
- <p>你好</p><input type="text">
- <script type="text/javascript">
- //获取p标签的父,子,兄节点
- var p = document.getElementsByTagName("P")[0];
- alert(p.parentNode);//body
- alert(p.childNodes[0].nodeValue)//你好
- alert(p.previousSibling.nodeValue)//空格,说明空格也会作为一个节点
- alert(p.nextSibling.nodeName);//input。这里就没出现空格,就是input节点
- </script>
- </body>
节点属性:
- 节点属性attributes是Node接口定义的属性。
- 节点属性attributes就是节点的属性(特别是元素节点)的属性。
- 事实上,attributes中包含的是一个节点所有属性的集合。
- attributes.getNameItem()和Element元素的getAttribute()方法很相似。
- <body>
- <ul id="city">
- <li id="bj" name="beijing">北京</li>
- <li id="tj" name="tianjin">天津</li>
- </ul>
- <script type="text/javascript">
- var bj = document.getElementById("bj");
- alert(bj.attributes[1].nodeValue);
- </script>
- </body>
检测子节点和属性
- 查看是否有子节点:hasChildNodes();
- 查看是存在属性:hasAttributes();
- 即使节点中没有定义属性,其attributes属性还是有效的,而且长度是0。同样childNodes属性也是如此。
- 当你想知道某个节点是否包含子节点或属性时,使用hasChildNodes(),hasAttributes()。如果想知道包含多少个:attributes和childNodes属性。
- 在IE中不存在hasAttributes();方法。(不使用)
- 示例如下:
- <body>
- <input type="text" id="username" value="username">
- <p>
- 明天休息
- </p>
- <script type="text/javascript">
- // var username = document.getElementById("username");
- // alert(username.hasChildNodes());//false
- // alert(username.hasAttribute());//无效果
- var p = document.getElementsByTagName("p")[0];
- alert(p.hasChildNodes());//true
- </script>
- </body>
操作Dom节点数:
- 插入节点:
- appendChild()方法。
- insertBefore()方法。
- 没有insertAfter()方法。
- 删除节点:
- removeChild()方法。
- 替换节点:
- replaceChild()
- 示例
- <body>
- <ul id="city">
- <!--注意这里不要回车-->
- <li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li>
- </ul>
- <script type="text/javascript">
- //创建<li id="sh" name="shanghai">上海</li>节点,增加到天津节点的前面
- // var liElement = document.createElement("li");
- // liElement.appendChild(document.createTextNode("上海"));
- // liElement.setAttribute("id","sh");
- // liElement.setAttribute("name","shanghai");
- // liElement.insertBefore(document.getElementById("tj"));
- // document.getElementById("city").appendChild(liElement);
- //<li id="sh" name="shanghai">上海</li>节点插入北京节点的后面,没有insertAfter()方法。
- var liElement = document.createElement("li");
- liElement.appendChild(document.createTextNode("上海"));
- liElement.setAttribute("id","sh");
- liElement.setAttribute("name","shanghai");
- var bjElement = document.getElementById("bj")
- //得到兄弟节点
- var nextElement = bjElement.nextSibling;
- liElement.insertBefore(nextElement);
- //添加到city下面
- document.getElementById("city").appendChild(liElement);
- </script>
- </body>
复制和移动节点:
- 复制节点:cloneNode(boolean)方法,其中boolean参数是判读是否复制子节点。
- 移动节点:由三种方法组合完成:
- 查找节点:
- getElementById();通过节点id属性,查找对应节点。
- getElementsByName();通过节点名称,查找对应节点。
- getElementsByTagName();通过节点名称,查找对应节点。
- 插入节点:
- insertBefore()方法
- appendChild()方法。
- 替换节点:
- replaceChild()方法。
- 查找节点:
- 示例代码如下:
- <body>
- <ul id="city">
- <li id="bj" name="beijing">北京</li>
- <li id="tj" name="tianjin">天津</li>
- </ul>
- lt;ul id="game">
- <li id="fk" name="fankong">反恐精英</li>
- <li id="xj" name="xingji">星际</li>
- </ul>
- lt;script type="text/javascript">
- //当点击北京节点,就和反恐精英替换
- document.getElementById("bj").onclick = function(){
- //得到北京节点
- var bjElement = document.getElementById("bj");
- //得到反恐精英
- var fkElemet = document.getElementById("fk");
- //这里也可以:this.parentNode.replaceChild(fkElemet,bjElement);
- bjElement.parentNode.replaceChild(fkElemet,bjElement);
- }
- lt;/script>
- </body>
复制案例:
- <body>
- <input type="button" id="login" value="登陆">
- <p>
- 按钮来这:
- </p>
- <script type="text/javascript">
- document.getElementById("login").onclick = function(){
- var loginElement = document.getElementById("login");
- //也可以写成:var copy = this.cloneNode(true);
- var copy = loginElement.cloneNode(true);
- var pElemet = document.getElementsByTagName("p")[0];
- pElemet.appendChild(copy);
- }
- </script>
- </body>
document,element,dom对象api详解的更多相关文章
- [总结]JS操作DOM常用API详解
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- jquery对象和DOM对象的相互转换详解
jquery对象和DOM对象的相互转换 在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如 var $varible = ...
- HTML5 FileReader读取Blob对象API详解
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...
- DOM API详解
来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...
- hibernate学习(2)——api详解对象
1 Configuration 配置对象 /详解Configuration对象 public class Configuration_test { @Test //Configuration 用户 ...
- javascript event(事件对象)详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- jqGrid APi 详解
jqGrid APi 详解 jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所 ...
- 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:
原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...
随机推荐
- Python3简单登录接口编写及遇到的问题分享
1.程序目标 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 2.思路 利用python中的pickle模块,实现用户登录信息(采用dict)和被锁定用户信息(采用list)的存储.所以我预先 ...
- CRM2Stark组件
CRM stark组件 开启新项目:CRM 再创建一个应用app02(python manage.py startapp app02 或者是工具栏:run...task:执行startapp app0 ...
- A1050
输入两个字符串,将第一个字符串中包含的第二个字符串的字符去掉(包括空格),然后输出. gets()不能用了,我混搭了string和length(),不用纠结长度还是很好的. 第二个字符串所在HashT ...
- vim 配色方案
1. 自己电脑上的vim 注释很难看清,又不想取消高亮.原来显示: 在 if has("syntax") syntax onendif 语句下面追加一句: colorscheme ...
- flash读写学习笔记与spi接口及简单测试验证(三)
FPGA中的视频图像资源,以及想要永久存储的程序都是要存储在flash中,flash是FPGA一个不可缺少的部分,flash的种类有很多,根据winbond公司的128Mbit Qual SPI接口的 ...
- 【blockly教程】第六章 Blockly的进阶
6.1 模块化程序设计 一个较大的程序一般应分为若干个程序模块,每一个模块用来实现一个特定的功能.所有的高级语言中都有子程序这个概念,用子程序实现模块的功能.比如在C语言中,子程序的作用是由函数完成 ...
- python中- \r用法
# \r 默认表示将输出的内容返回到第一个指针,这样的话,后面的内容会覆盖前面的内容 def main(): for i in range(65,91): s="\r{name:s}&quo ...
- Mac环境下RabbitMq安装与测试教程
RabbitMq安装与测试教程 Installing on Mac I. 安装 123456789 brew install rabbitmq ## 进入安装目录cd /usr/local/Cella ...
- 网站端测试常见BUG
1.翻页 翻页时,没有加载数据为空,第二页数据没有请求 翻页时,重复请求第一页的数据 翻页时,没有图片的内容有时候会引用有图片的内容 2.图片数据为空 图片数据为空时,会保留为空的图片数据位置 3.链 ...
- Jmeter 接口自动化执行报错 无法找到类或者类的方法
写好的自动化测试脚本在PC以及mac book 都执行正确,但是放到linux集成环境时就一直报错,报错类似如下 [jmeter] // Debug: eval: nameSpace = NameSp ...