首页手记 JavaScript日常修炼笔记（第七天）

JavaScript日常修炼笔记（第七天）

标签：

JavaScript

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

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

语法：

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

getElementsByTagName()方法

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

语法:

document.getElementsByTagName(Tagname)
说明:

Tagname是标签的名称，如p、a、img等标签名。

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

区别getElementByID,getElementsByName,getElementsByTagName

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

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

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

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 节点有三个重要的属性：

nodeName : 节点的名称

nodeValue ：节点的值

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>

点击查看更多内容