为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript日常修炼笔记(第七天)

标签:
JavaScript

日常修炼JavaScript已经第七天,一个星期了,继续朝着万元高薪进发。

学到现在发现代码真的博大精深,我看很多评论都是说前面的课程都能看懂,然后一到编程练习就不知道怎么写了,哈哈~其实很正常,因为你在看的时候是按着他提示的一步步写,等到自己写的时候就不知道怎么下手了,所以说在学的过程中就要保持自己写代码,我都是把<script>里面的内容删了,自己再写一次,所以大家继续努力,一起成长。
基本已经定好目标了,html+css+js+jquery+ajax+bootstrap+react
就学好这些吧,也不强求太高!
getElementsByName()方法
返回带有指定名称的节点对象的集合。

语法:

document.getElementsByName(name)
与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

document.getElementsByTagName(Tagname)
说明:

  1. Tagname是标签的名称,如p、a、img等标签名。

  2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。

  1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。

  2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。

  3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName("小孩")。

把上面的例子转换到HTML中,如下:

<input type="checkbox" name="hobby" id="hobby1"> 音乐
input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

练习题:

<form>
  请选择你爱好:<br>
  <input type="checkbox" name="hobby" id="hobby1">  音乐
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
  <input type="button" value = "全选" onclick = "checkall();">
  <input type="button" value = "全不选" onclick = "clearall();">
  <p>请输入您要选择爱好的序号,序号为1-6:</p>
  <input id="wb" name="wb" type="text" >
  <input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
  function checkall() {
    var hobby = document.getElementsByTagName("input");
    for (var i = 0; i < hobby.length; i++) {
      hobby[i].checked = true;
    }
  }
  function clearall(){
    var hobby = document.getElementsByName("hobby");
    for (var i = 0; i < hobby.length; i++) {
      hobby[i].checked = false;
    }
  }
  function checkone(){
    var val = document.getElementById("wb").value;
    if (parseInt(val)>6 || parseInt(val)<1) {
      alert("sss");
    }
    var hobby = document.getElementsByName("hobby");
    hobby[parseInt(val)-1].checked = true;
  }
</script>

getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法:

elementNode.getAttribute(name)

<p id="intro">课程列表</p>  
    <ul>  
        <li title="第1个li">HTML</li>  
        <li>CSS</li>  
        <li title="第3个li">JavaScript</li>  
        <li title="第4个li">Jquery</li>  
        <li>Html5</li>  
    </ul>  
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
    var con=document.getElementsByTagName("li");
    for (var i=0; i< con.length;i++){
      var text = con[i].getAttribute("title");
      if(text!=null)
      {
        document.write(text+"<br>");
      }
    } 
 </script> 

setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

语法:

elementNode.setAttribute(name,value)
说明:

1.name: 要设置的属性名。

2.value: 要设置的属性值。

  <p id="intro">我的课程</p>  
  <ul>  
    <li title="JS">JavaScript</li>  
    <li title="JQ">JQuery</li>  
    <li title="">HTML/CSS</li>  
    <li title="JAVA">JAVA</li>  
    <li title="">PHP</li>  
  </ul>  
  <h1>以下为li列表title的值,当title为空时,新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
  var Lists=document.getElementsByTagName("li");
  for (var i=0; i<Lists.length;i++)
  {
    var text = Lists[i].getAttribute("title");
    document.write(text +"<br>");
    if(text=="")
    {
    Lists[i].setAttribute("title","web");
    document.write(Lists[i].getAttribute("title")+"<br>");
    }
  }
</script>

节点属性

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

  1. nodeName : 节点的名称

  2. nodeValue :节点的值

  3. nodeType :节点的类型
  <ul>
     <li>javascript</li>
     <li>HTML/CSS</li>
     <li>jQuery</li>     
  </ul>
  <script type="text/javascript">
    var node=document.getElementsByTagName("li");
    for(var i=0;i<node.length;i++){
      document.write("li["+(i+1)+"]:"+"<br/>"+"节点名:"+node[i].nodeName+"<br/>");
      document.write("节点值:"+node[i].nodeValue+"<br/>");
      document.write("节点类型:"+node[i].nodeType+"<br/><br/>");
        }
  </script>

访问子节点childNodes

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

语法:

elementNode.childNodes

<script type="text/javascript">
    var x = document.getElementsByTagName("div")[0].childNodes;
    for(var i=0; i<x.length; i++){
        document.write("第"+(i+1)+"个节点的值是:"+x[i].nodeValue+"<br  />"); 
    document.write("第"+(i+1)+"个节点的名称是:"+x[i].nodeName+"<br  />"); 
    document.write("第"+(i+1)+"个节点的属性是:"+x[i].nodeType+"<br  />");
    document.write("<br  />");
    }

</script>

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

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

语法:

node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。 

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:

node.lastChild
<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+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType+"<br/>");
 document.write(x.lastChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType);
</script>

访问父节点parentNode

获取指定节点的父节点

语法:

elementNode.parentNode
注意:父节点只能有一个。

<ul id="con">
<li id="lesson1">javascript
  <ul> 
      <li id="tcon"> 基础语法</li>
      <li>流程控制语句</li>
      <li>函数</li>
      <li>事件</li>
      <li>DOM</li>
  </ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS 
  <ul>
    <li>文字</li>
    <li>段落</li>
    <li>表单</li>
    <li>表格</li>  
  </ul> 
</li></ul>  
<script  type="text/javascript">    
   var mylist = document.getElementById("tcon"); 
   var hCon=mylist.parentNode.parentNode.parentNode.lastChild;
  document.write(hCon.innerHTML);
</script> 

mylist.parentNode 访问的是上一层的ul; mylist.parentNode.parentNode
访问的是上一层ul的上一层li; mylist.parentNode.parentNode.parentNode
访问的是访问的是上一层ul的上一层li的ul;
然后mylist.parentNode.parentNode.parentNode.lastChild,访问的是最外层ul的最后一个li的内容,
在添加语句:document.write(mylist.innerHTML);

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>

<script type="text/javascript">

  var otest = document.getElementById("test");  
  var newnode = document.createElement("li");
  var newtext = document.createTextNode("PHP");
  newnode.appendChild(newtext);
  otest.appendChild(newnode);

</script> 

插入节点insertBefore()

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

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

<ul id="test"><li>JavaScript</li><li>HTML</li></ul> 

<script type="text/javascript">

  var otest = document.getElementById("test");  
  var newnode=document.createElement("li");
  newnode.innerHTML="php";
  otest.insertBefore(newnode,otest.lastChild);

</script> 

删除节点removeChild()

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

语法:

nodeObject.removeChild(node)
参数:

node :必需,指定需要删除的节点。

<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {  

 var content=document.getElementById("content");

  nodel=content.childNodes.length

  for(i=0;i<nodel;i++)  {  

      var x=content.removeChild(content.childNodes[0]);  }

   }
</script>

<button onclick="clearText()">清除节点内容</button>

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法:

node.replaceChild (newnode,oldnew )
参数:

newnode : 必需,用于替换 oldnew 的对象。
oldnew : 必需,被 newnode 替换的对象。

  <div><b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

    <script type="text/javascript">
      function replaceMessage(){
        var oldnode=document.getElementById("oldnode");
        var newnode=document.createElement("i");
        newnode.innerHTML=oldnode.innerHTML
        oldnode.parentNode.replaceChild(newnode,oldnode);

       }    
  </script>

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法:

document.createElement(tagName)
参数:

tagName:字符串值,这个字符串用来指明创建元素的类型。

注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。

<script type="text/javascript">
var main = document.body;
//创建链接
function createa(url,text){
    var a = document.createElement("a");
    a.href = url;
    a.innerHTML = text;
    a.style.color = "red";
    main.appendChild(a);

}
// 调用函数创建链接
createa("http://www.imooc.com","慕课网");

</script> 

创建文本节点createTextNode

createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。

语法:

document.createTextNode(data)

<style type="text/css">

.message{    
    width:200px;
    height:100px;
    background-color:#CCC;}

</style>
<script type="text/javascript">
    var element = document.createElement("p");
    element.className = "message";
    var textNode = document.createTextNode("i love javascript");
    element.appendChild(textNode);
    document.body.appendChild(element);

</script> 
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消