getElementsByName getElementsByTagName

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量448 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript function 代码练习 generator properties html
 

removeChild,replaceChild,insertBefore,innerText,innerHTML,outerText,outerHTML学习

今天学习一下javascript，对节点操作进行代码练习，我以前看过，就是很简单的看看，没有认真的学习，今天是认真的学习了一下。

removeChild移除节点内容

replaceChild替代节点内容

insertBefore在某个节点前插入一个节点

innerText,innerHTML,outerText,outerHTML这些以前就比较熟悉了！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script type="text/javascript">
   function deleteHelloWorld(){
    var helloworld=(document.body.getElementsByTagName("p"))[0];
    document.body.removeChild(helloworld);
   }
  
   function deleteFirstLine(){
        var firstLine=document.getElementById("myHeader");
        document.body.removeChild(firstLine);
   }
  
   function replaceMessage(){
       var newFirstLine=document.createElement("p");
       var newFirstLineText=document.createTextNode("New First Line!");
       newFirstLine.appendChild(newFirstLineText);
       var oldNode=document.getElementById("myHeader");
       oldNode.parentNode.replaceChild(newFirstLine,oldNode);
   }
  
   function insertBeforeMessage(){
       var insertBefore=document.createElement("p");
       var insertBeforeText=document.createTextNode("a text");
       insertBefore.appendChild(insertBeforeText);
       var oldNode=document.getElementById("myHeader");
       oldNode.parentNode.insertBefore(insertBefore,oldNode);
   }
  
   function intertextStuff(){
       var innerLine1=document.getElementById("innerLine1");
       innerLine1.innerText="new text of innerLine1";
      
       var innerLine2=document.getElementById("innerLine2");
       innerLine2.innerHTML="<strong>New text of innerLine2</strong>";
       //wrong: innerLine2.innerHTML="<h1>New text of innerLine2</h1>";
   }
  
   function outertextStuff(){
       var outerLine1=document.getElementById("outerLine1");
       outerLine1.outerText="new text of outerLine1";
      
       var outerLine2=document.getElementById("outerLine2");
       outerLine2.outerHTML="<h1>New text of outerLine2</h1>";
   }
</script>

<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<h1 id="myHeader">First Line</h1>

<a href="javascript:deleteHelloWorld()"><big>delete "Hello World"</big></a>
<br>
<a href="javascript:deleteFirstLine()"><big>delete "First Line"</big></a>
<br>
<a href="javascript:replaceMessage()"><big>Replace "First Line" with "New First line"</big></a>
<br>
<a href="javascript:insertBeforeMessage()"><big>Insert "a text" before "First line"</big></a>

<script type="text/javascript">
    var helloWorld=document.createElement("p");
    var helloWorldText=document.createTextNode("Hello World");
    helloWorld.appendChild(helloWorldText);
    document.body.appendChild(helloWorld);
    //var docBody=(document.getElementsByTagName("body"))[0]
    //docBody.appendChild(helloWorld);
   
   
    //insert a few nodes at a time
    var oFragment=document.createDocumentFragment(); //创建文档片段对象
    for(var i=0;i<10;i++){
          var oP=document.createElement("p");
          var oText=document.createTextNode(i);
          oP.appendChild(oText);
          oFragment.appendChild(oP);
    }
   
   
    document.body.appendChild(oFragment);
   
    //how many properties are available?
    var props=new Array();
    for(var property in window.document){
        props.push(property);
    }
   
    for(i=0;i<props.length;i++){
       document.write(props[i]+"/");
       if(i>0 && i%6==0){
           document.write("<br>");
       }
    }
   
</script>
<br>
<p id="innerLine1">InnerLine1</p>
<p id="innerLine2">InnerLine2</p>
<h4 id="outerLine1">outerLine1</h4>
<h4 id="outerLine2">outerLine2</h4>

<a href="javascript:intertextStuff()"><big>InnerLine</big></a>
<a href="javascript:outertextStuff()"><big>OuterLine</big></a>
</BODY>
</HTML>

Danny
关注
专栏目录
#神仙见了会流泪之#getElementsByTagName的用法
其实我十八，你呢？
07-04 2143
神仙又来流泪了，我们在学习中经常会出现，相同的方法可以有不同的用处，就很容易记混，刚刚我就遇到了这种情况(其实是记得不扎实￣□￣｜｜)，我来整理下getElementsByTagName的方法都有哪些吧(其实我现在了解的就俩。。。) 第一种:通过document对象调用 document.getElementsByTagName(“标签名”) 这种方法是 通过标签名获取一组元素节点对象 第二种:通过具体的元素节点调用 父节点.getElementsByTagName(后代节点) 第二种具体代码如下，第一种应
getElementsByTagName()
weixin_30443075的博客
11-01 3028
getElementsByTagName()：方法的用途是寻找有着给定标签名的所有的元素。 element = document.getElementsByTagName(tagName); 这个方法返回一个节点的集合，这个集合可以当做一个数组来处理。这个集合的length属性等于当前文档里有着给定标签名的所有元素的总个数。这个数组里面的每个元素都是一个对象，他们都有着nodeName...
js 删除removeChild与替换replaceChild
weixin_30678349的博客
03-20 245
<input type="button" value="删除" id="btn" /> <input type="button" value="替换" id="btn1" /> <input type="button" value="全删" id="btn2" /> <ul id="ul"> <l...
removeChild,replaceChild,insertBefore的学习
知周博远
05-23 106
removeChild,replaceChild,insertBefore,innerText,innerHTML,outerText,outerHTML学习 今天学习一下javascript，对节点操作进行代码练习，我以前看过，就是很简单的看看，没有认真的学习，今天是认真的学习了一下。 removeChild移除节点内容 replaceChild替代节点内容 insertBefore在某个节点...
getElementsByTagName取的实际上是oparent下所有的标签
DB的技术日志
08-29 946
getElementsByTagName取的是目标元素下所有目标标签
getElementsByTagName() 方法
m0_57835615的博客
05-29 2078
getElementsByTagName() 方法返回带有指定标签名的所有元素。 语法格式： node.getElementsByTagName('标签名');
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
09-06
在HTML文档对象模型（DOM）中，有三种主要方法用于查找HTML元素：`document.all`，`getElementById()`，`getElementsByName()` 和 `getElementsByTagName()`。这些方法各有其特性和适用场景，理解它们的区别对于编写...
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页
09-06
本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`getElementsByTagName`这四个方法的区别和用法。 1. `document.all` `document.all` 是一个数组集合，它包含了HTML文档中所有的元素，...
getelementsbyname和getelementsbytagname
04-21
其中，getelementsbyname 方法是根据元素的 name 属性获取元素，而 getelementsbytagname 方法是根据元素的标签名获取元素。因此，它们的区别在于选择元素的方式不同。getelementsbyname 方法只能选择具有 name 属性...
js中getelementsbyname和getelementsbyTagname的区别
06-06
`getElementsByName` 方法用于通过元素的 `name` 属性获取元素节点列表，而 `getElementsByTagname` 方法用于通过元素的标签名获取元素节点列表。 具体来说，`getElementsByName` 方法返回一个带有指定名称的元素...
HTML DOM Document 对象详解
Hengistchan的博客
01-09 1677
       本文转载于      https://segmentfault.com/a/1190000000660947        在浏览器中，与用户进行数据交换都是通过客户端的javascript代码来实现的，而完成这些交互工作大多数是document 对象及其部件进行的，因此document对象是一个比较重要的对象。 document对象概述 document对象是文档的根节点，w...
JavaScript核心之Element节点
上善若泪
05-03 605
目录 1 Element节点概述 2 属性 2.1 attributes，id，tagName 2.1.1 attributes 2.1.2 id属性 2.1.3 tagName属性 2.2 innerHTML，outerHTML 2.2.1 innerHTML 2.2.2 outerHTML 2.3 children，childElementCount，firstElemen...
用getElementsByTagName遍历HTML DOM元素
hddfuuh的博客
11-15 1478
用getElementsByTagName遍历HTML DOM元素
BOM和DOM详解
热门推荐
anythings的专栏
04-25 2万+
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。 js组成 我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 874
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 595
【代码】【JavaScript】LeetCode：707设计链表。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 511
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 470
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 896
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值