JavaScript HTML DOM元素节点常用操作接口

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

1. nodeName : 节点的名称

2. nodeValue :节点的值

3. nodeType :节点的类型

节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9。

一、添加和删除节点(HTML 元素)

1、创建节点

1)创建该元素(元素节点);

2)向一个已存在的元素追加该元素。

语法:appendChild(newnode)

eg:

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

document.createElement("标签名"); // 创建元素节点

document.createTextNode("文本"); //创建文本节点

appendChild(); //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 用法:a.appendChild(b),把b添加到a内。

2.添加节点

appendChild(); //在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法,eg:同上。

insertBefore(); //insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:insertBefore(newnode,node);

eg:

<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul><script type="text/javascript">
var otest = document.getElementById("test");
var newli = document.createElement("li");
newli.innerHTML="php";
//otest.insertBefore(newli,otest.lastChild);
otest.insertBefore(newli,otest.childNodes[1]);
</script>

3.删除节点

removeChild() //removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:nodeObject.removeChild(node)

eg:

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

DOM 需要清楚需要删除的元素,以及它的父元素。先找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素。

4.替换节点

replaceChild //把一个给定父元素里面的一个子节点替换为另一个子节点。

语法:referencre = element.replaceChild(newChild,oldChild); //newChild: 必需,用于替换 oldChild的对象。 oldChild: 必需,被 newChild替换的对象。

eg:

<div>
<b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div>
<a href="javascript:replaceMessage()" rel="external nofollow" > 将加粗改为斜体</a><script type="text/javascript">
function replaceMessage(){var b=document.getElementById("oldnode");var newNode=document.createElement("i");newNode.innerHTML=b.innerHTML;b.parentNode.replaceChild(newNode,b);
}
</script>

注意:当 oldnew 被替换时,所有与之相关的属性内容都将被移除。 newChild必须先被建立。

5.访问子节点

childNodes //访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:elementNode.childNodes //可用childNodes[i]数组的形式表示第几个子元素

eg:

<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var int=document.getElementsByTagName("div")[0].childNodes;
for (var i=0;i<int.length;i++)
{
document.write("名字:"+int[i].nodeName+"<br>");
}
document.write("子节点个数:"+int.length+"<br>");
</script>

6.访问子节点的第一和最后项

firstChild //返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:node.firstChild //与elementNode.childNodes[0]是同样的效果。

lastChild //返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:node.lastChild //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

eg:

<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write("第一个子节点:"+x.firstChild.nodeName+"<br>");
document.write("最后一个子节点:"+x.lastChild.nodeName);
</script>

7.访问父节点

parentNode //获取指定节点的父节点

语法:elementNode.parentNode

eg:

<div id="text">
<p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>

注意: 父节点只有一个,浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

8.访问兄弟节点

nextSibling //可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:nodeObject.nextSibling

previousSibling //可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:nodeObject.previousSibling

eg:

<ul id="myList">
<li id="item1">Coffee</li>
<li id="item2">Tea</li>
</ul>
<p id="demo">点击按钮来获得首个项目的下一个同胞。</p>
<button οnclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=document.getElementById("item1").nextSibling.innerHTML;
}
</script>

注意: 如果无此节点,则该属性返回 null。两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

解决问题方法:判断节点nodeType是否为1, 如是为元素节点,跳过。

以上就是本文的全部内容,希望对大家的学习有所帮助

您可能感兴趣的文章:

  • 详解JS获取HTML DOM元素的8种方法
  • JS控制HTML元素的显示和隐藏的两种方法
  • JavaScript中获取HTML元素值的三种方法
  • JavaScript通过HTML的class来获取HTML元素的方法总结
  • javascript 控制 html元素 显示/隐藏实现代码

文章同步发布: https://www.geek-share.com/detail/2775368631.html

转载于:https://www.cnblogs.com/xxcn/p/11267818.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/423843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[导入]九个笑话能告诉你九个人生的道理

九个笑话能告诉你九个人生的道理,你要看吗1、建筑师 一位夫人打电话给建筑师&#xff0c;说每当火车经过时&#xff0c;她的睡床就会摇动。 “这简直是无稽之谈&#xff11;建筑师回答说&#xff0c;“我来看看。” 建筑师到达后&#xff0c;夫人建议他躺在床上&#xff0c;体会…

nodejs对mongodb数据库的增删改查操作(转载)

首先要确保mongodb的正确安装&#xff0c;安装参照&#xff1a;http://docs.mongodb.org/manual/tutorial/install-mongodb-on-debian-or-ubuntu-linux 另外可以参考我的另一篇博文 http://www.cnblogs.com/sexintercourse/p/5774310.html 指导mongo和nodejs的开发 然后下载nod…

mybatis学习(16):不使用接口的方式

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Inteage id); }BlogMapper.xml <?xml version"1.0" encoding"UTF-8" ?>…

AS3图像抖动效果源码。

DemoSourceWebsite转载于:https://www.cnblogs.com/xxcainiao/archive/2008/05/07/1186805.html

mybatis学习(17):列名与属性名不一致的情况(使用别名)

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Inteage id); }BlogMapper.xml <?xml version"1.0" encoding"UTF-8" ?>…

mybatis学习(18):列名与属性名不一致的情况(使用ResultMap)

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer id);Blog selectBlog2(Integer id); }BlogMapper.xml <?xml version"1.0" en…

git基础-远程仓库的使用

远程仓库的使用 为了能在任意 Git 项目上协作&#xff0c;你需要知道如何管理自己的远程仓库。 远程仓库是指托管在因特网或其他网络中的你的项目的版本库。 你可以有好几个远程仓库&#xff0c;通常有些仓库对你只读&#xff0c;有些则可以读写。 与他人协作涉及管理远程仓库以…

MVCToolKit中HtmlHelper.ActionLink的BUG?

分页时<%if (ViewData.Accounts.IsPreviousPage) { %><%Html.ActionLink<SpeakOutFreely.Controllers.ManageController>(c >c.List(ViewData.Accounts.PageIndex -1), "Previous")%><%} %><%if (ViewData.Accounts.IsNextPage) { %&g…

PyChram简单使用教程

一、PyChram下载 官网&#xff1a;http://www.jetbrains.com/pycharm Windows:http://www.jetbrains.com/pycharm/download/#sectionwindows Linux:http://www.jetbrains.com/pycharm/download/#sectionlinux Mac:http://www.jetbrains.com/pycharm/download/# 二、PyChram简单…

mybatis学习(19):模糊查询#

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import java.util.List;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer id);Blog selectBlog2(Integer id);List<Blog> selectBlogByTi…

Zend Framework(一)概述介绍

Zend Framework是一套网站开发框架&#xff0c;包含了MVC模式以及众多解决特定问题的组件。ZendFramework框架组件&#xff1a;1 Zend_Controller : 此模块为应用程序提供了全面的控制&#xff0c;将请求转化为特定的行为并确保执行2 Zend_Db : 此模块基于PHP数据对象(PDO)并提…

Sql语句之递归查询

直接进入正题 比如一个表&#xff0c;有id和pId字段&#xff0c;id是主键&#xff0c;pid表示它的上级节点&#xff0c;表结构和数据&#xff1a; CREATE TABLE [aaa]( [id] [int] NULL, [pid] [int] NULL, [name] [nchar](10))GOINSERT INTO aaa VALUES(1,0,a)INSERT INTO aaa…

mybatis学习(20):模糊查询$

目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import java.util.List;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer id);Blog selectBlog2(Integer id);List<Blog> selectBlogByTi…

WX: picker 滚动选择器

http://www.wxappclub.com/doc/1-13 转载于:https://www.cnblogs.com/Aozorazy/p/11275117.html

Python标准异常总结

AssertionError 断言语句&#xff08;assert&#xff09;失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF&#xff08;Ctrld&#xff09; FloatingPointError 浮点计算错误 GeneratorExit generator.close()方法被调用的时候 ImportError 导入模…

mybatis学习(21):MySQL 字符串 转换 CAST与CONVERT 函数的用法

MySQL 的CAST()和CONVERT()函数可用来获取一个类型的值&#xff0c;并产生另一个类型的值。两者具体的语法如下&#xff1a; Sql代码 CAST(value as type); CONVERT(value, type); 就是CAST(xxx AS 类型), CONVERT(xxx,类型)。 Sql代码 mysql> SELECT CAST(3.35 …

VUE初始化一个项目

https://www.cnblogs.com/huihuijiang/p/8252851.html ESLint 如果选了yes&#xff0c;会以严格模式规范你的代码&#xff0c;如果你想规范化开发可以选择yes,如果觉得影响开发进度就可以选no 转载于:https://www.cnblogs.com/kstudy/p/11278122.html

【转载】快速、可伸缩和流式的AJAX代理--跨域持续内容分发

原文&#xff1a;《Fast, Scalable, Streaming AJAX Proxy - continuously deliver data from across domains》 作者&#xff1a;Omar Al ZabirURL&#xff1a; http://www.codeproject.com/KB/ajax/ajaxproxy.aspx Download source - 16.1 KB Introduction Due to browsers p…

pycharm常用设置(keymap设置及eclipse常用快捷键总结)

2015-04-15 13:23 23800人阅读 评论(0) 收藏 举报分类&#xff1a;openstack-环境及安装配置&#xff08;10&#xff09; 版权声明&#xff1a;欢迎大家转载&#xff0c;转载请注明出处blog.csdn.net/tantexian。 设置pycharm为Eclipse快捷键后使用总结&#xff1a; Ctrl O 根…

mybatis学习(22):查询排序

按照某列排序 目录结构 com.geyao.mybatis.mapper BlogMapper类 package com.geyao.mybatis.mapper;import java.util.List;import com.geyao.mybatis.pojo.Blog;public interface BlogMapper {Blog selectBlog(Integer id);Blog selectBlog2(Integer id);List<Blog> …