DOM 基础 [字符串|数组|DOM操作]

Author Avatar
wanglinzhizhi Feb 02, 2016

JavaScript Note

字符串

返回指定的字符串首次出现的位置

indexOf() 
方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法
    stringObject.indexOf(substring, startpos)

参数说明：

说明：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现，则该方法返回 -1。

例如: 对 “I love JavaScript!” 字符串内进行不同的检索：

<script type="text/javascript">
  var str="I love JavaScript!"
  document.write(str.indexOf("I") + "<br />");
  document.write(str.indexOf("v") + "<br />");
  document.write(str.indexOf("v",8));
</script>
//以上代码的输出：
0
4
9

找到第二个o出现的位置

var mystr="Hello World!"
(mystr.indexOf('o',mystr.indexOf('o')+1));//用两次indexOf

字符串分割split()

split() 方法将字符串分割为字符串数组，并返回此数组。

​	stringObject.split(separator,limit)

注意：如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
我们将按照不同的方式来分割字符串：
使用指定符号分割字符串，代码如下:

var mystr = "www.imooc.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");
//运行结果:
www,imooc,com
www,imooc
//将字符串分割为字符，代码如下：
document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));
//运行结果:
w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i

提取字符串substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法:

stringObject.substring(starPos,stopPos);

注意：

  1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
  2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

  3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
    使用 substring() 从字符串中提取字符串，代码如下：

    <script type="text/javascript">
    var mystr="I love JavaScript";
    document.write(mystr.substring(7));
    document.write(mystr.substring(2,6));
    </script>
    //运行结果:
    JavaScript
    love

提取指定数目的字符substr()

substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。

​

​	stringObject.substr(startPos,length)

注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果startPos为负数且绝对值大于字符串长度，startPos为0。
使用 substr() 从字符串中提取一些字符，代码如下：

<script type="text/javascript">
  var mystr="I love JavaScript!";
  document.write(mystr.substr(7));
  document.write(mystr.substr(2,4));
</script>
//运行结果：
JavaScript!
love

数组

数组连接concat()

concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

​arrayObject.concat(array1,array2,...,arrayN)

指定分隔符连接数组元素join()

join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

arrayObject.join(分隔符)

参数说明:

注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。 我们使用join（）方法，将数组的所有元素放入一个字符串中，代码如下：

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join());
</script>
//运行结果：
I,love,JavaScript

我们将使用分隔符来分隔数组中的元素，代码如下：

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>
//运行结果：
I.love.JavaScript

颠倒数组元素顺序reverse()

reverse() 方法用于颠倒数组中元素的顺序。

arrayObject.reverse()

注意：该方法会改变原来的数组，而不会创建新的数组。
定义数组myarr并赋值，然后颠倒其元素的顺序：

  var myarr = new Array(3)
  myarr[0] = "1"
  myarr[1] = "2"
  myarr[2] = "3"
  document.write(myarr + "<br />")
  document.write(myarr.reverse())
//运行结果：
1,2,3
3,2,1

选定元素slice()

slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)

参数说明：

1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

  1. 该方法并不会修改数组，而是返回一个子数组。
    注意：
  2. 可使用负值从数组的尾部选取元素。
    2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
  3. String.slice() 与 Array.slice() 相似。
    我们将创建一个新数组，然后从其中选取的元素，代码如下：
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "<br>");
document.write(myarr.slice(2,4) + "<br>");
document.write(myarr);
//   运行结果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6

数组排序sort()

sort()方法使数组中的元素按照一定的顺序排列。

arrayObject.sort(方法函数)

参数说明：

1.如果不指定<方法函数>，则按unicode码顺序排列。

2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

  • 若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。

    • 若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
    • 若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

1.使用sort()将数组进行排序，代码如下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript");
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>
//运行结果：
Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代码没有按照数值的大小对数字进行排序。

2.如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>
//运行结果：
80,16,50,6,100,1
1,6,16,50,80,100

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
window.history.[属性|方法]
注意：window可以省略。
History 对象属性

History 对象方法

使用length属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

返回前一个浏览的页面

back()方法，加载 history 列表中的前一个 URL。

window.history.back();
比如，返回前一个浏览的页面，代码如下：
window.history.back();
注意：等同于点击浏览器的倒退按钮。
back()相当于go(-1),代码如下:
window.history.go(-1);

userAgent

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法
navigator.userAgent
几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。

使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),代码如下:

function validB(){
  var u_agent = navigator.userAgent;
  var B_name="Failed to identify the browser";
  if(u_agent.indexOf("Firefox")>-1){
  	B_name="Firefox";
  }else if(u_agent.indexOf("Chrome")>-1){
true  B_name="Chrome";
  }else 	
    if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
    B_name="IE(8-10)";  
  }
truedocument.write("B_name:"+B_name+"<br>");
truedocument.write("u_agent:"+u_agent+"<br>");
}

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点：<html>、<body>、<p>等元素节点，即标签。
2. 文本节点: 向用户展示的内容，如<li>...</li>中的文本。
3. 属性节点: 元素属性，如<a>标签的链接属性href="http://www.wanglinzhizhi.me"。

getElementsByTagName()方法

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

语法:
		getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

区别getElementByID,getElementsByName,getElementsByTagName

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

  1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
  2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
  3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。

方法总结如下:

注意：方法区分大小写
通过下面的例子(6个name=”hobby”的复选项，两个按钮)来区分三种方法的不同:

<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">  跑步
<input type="button" value = "全选" id="button1">
<input type="button" value = "全不选" id="button1">
  1. document.getElementsByTagName(“input”)，结果为获取所有标签为input的元素，共8个。
  2. document.getElementsByName(“hobby”)，结果为获取属性name=”hobby”的元素，共6个。
  3. document.getElementById(“hobby6”)，结果为获取属性id=”hobby6”的元素，只有一个，”跑步”这个复选项。

getAttribute()方法

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

elementNode.getAttribute(name)

说明:

  1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
  2. name：要想查询的元素节点的属性名字

setAttribute()方法

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

​elementNode.setAttribute(name,value)

说明：

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

注意：

  1. 把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
  2. 类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

节点属性

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

1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

  • 元素节点的 nodeName 与标签名相同

  • 属性节点的 nodeName 是属性的名称

  • 文本节点的 nodeName 永远是 #text

  • 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本自身
  • 属性节点的 nodeValue 是属性的值

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的标签
• document.body.clientHeight
• document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth|| document.body.clientWidth;
var h= document.documentElement.clientHeight|| document.body.clientHeight;

任务
在script标签内，补充右边编辑器代码，获取浏览器当前窗口大小。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.clientWidth||document.body.clientWidth;
var h= document.documentElement.clientHeight||document.body.clientHeight;
document.write(w+"<br />");
document.write(h);
</script>
</body>
</html>

网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth || document.body.scrollWidth;
var h=document.documentElement.scrollHeight|| document.body.scrollHeight;

注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;
</script>
</body>    
</html>

网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值
offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

<script>
    var w= document.documentElement.offsetWidth || document.body.offsetWidth;
    var h= document.documentElement.offsetHeight|| document.body.offsetHeight;
    </script>
    <!DOCTYPE HTML>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <script type="text/javascript">
    var w= document.documentElement.offsetWidth|| document.body.offsetWidth;
    var h= document.documentElement.offsetHeight|| document.body.offsetHeight;
    document.write(w);
    </script>
    </body>
    </html>

网页卷去的距离与偏移量

  • scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
  • scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
  • offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
  • offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

  1. 区分大小写
  2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
expand_less
Powered by Hexo
Theme - Material