04-JS使用过的函数 31-40

31、reverse

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

 以上例程会输出：  

fruits: Mango,Apple,Orange,Banana 

 32、join

join() 方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。

实例1： 

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

以上例程会输出：   

energy: Banana,Orange,Apple,Mango

实例2：使用不同的分隔符

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");

energy: Banana and Orange and Apple and Mango

 33、split

split() 方法用于把一个字符串分割成字符串数组。

提示： 如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注意： split() 方法不改变原始字符串。

var str="How are you doing today?";
var n=str.split(" ");

以上例程会输出： 

n: How,are,you,doing,today?

 34、charAt

charAt() 方法可返回指定位置的字符。

第一个字符位置为 0, 第二个字符位置为 1,以此类推.

var str = "HELLO WORLD";
var n = str.charAt(2)

以上例程会输出：  

 n:L

35、instanceof 

instanceof  是 JavaScript 中的运算符，用于检查一个对象是否是某个构造函数的实例。它的语法形式为：object instanceof constructor

其中，object 是要检查的对象，constructor 是要检查的构造函数。如果 object 是 constructor 的实例，则返回 true，否则返回 false。

const str = "Hello, world!";
console.log(str instanceof String); 
// false，因为 str 是一个字符串字面量，不是 String 对象的实例const 

strObj = new String("Hello, world!");
console.log(strObj instanceof String); 
// true，因为 strObj 是 String 对象的实例

需要注意的是，instanceof 只能用于检查对象是否是某个构造函数的实例，不能用于检查对象是否是某个类的实例，因为 JavaScript 中没有类的概念。

 36、isArray

isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true，否则返回 false。

isArray，map，foreach，reduce等所有数组方法都写在Array.prototype上，因此，我可以这样使用Array.isArray

var arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
var str = "hello";
console.log(Array.isArray(str)); // false

37、getElementById 

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。

如果没有指定 ID 的元素返回 null

如果存在多个指定 ID 的元素则返回第一个。

<div id="boxx" class="txt" style="color: red;" name='111'>
    div标签元素的文本节点
</div>

var box = document.getElementById('boxx');
console.log('box----', box);

以上例程会输出：   

 

38、getAttribute

getAttribute是JavaScript中用于获取HTML元素的属性值的方法。它接受一个参数，即要获取的属性名称，返回该属性的值。例如，若要获取id为"example"的元素的class属性值，可以使用以下代码：

<div id="boxx" class="txt" style="color: red;" name='111'>
    div标签元素的文本节点
</div>

console.log(box.getAttribute('name'));
console.log(box.getAttribute('class'));

 

39、getElementsByTagName && getElementsByClassName && getElementsByName

        /**

         * dom查询获取元素节点对象的方式：

         * 1.document.getElementById('身份证号'); 通过元素的id获取元素节点,返回的是一个节点对象

         *

         * 2.documen.getElementsByTagName('标签名字'); 通过元素的标签类型获取元素节点, 返回的是一个类数组对象(伪数组), 数组里面 是相同标签类型的元素节点

         *

         * 3.document.getElementsByClassName('class的值'); 通过元素的类名获取元素, 返回的也是一个类数组对象(伪数组), 数组里面 是相同类名的元素节点

         *

         * 4.document.getElementsByName('name的值'); 通过元素的name属性获取元素, 反悔的也是一个类数组对象(伪数组), 数组里面 是相同name值的元素节点

         *

         * ps: 获取的是一个数组, 如果想对数组内的每一个元素节点对象进行操作, 需要通过索引来获取对应的节点对象

         * */

// 第一种
var heroListById = document.getElementById('hero-list');
console.log('ById---', heroListById);

//第二种
var heroListByTagName = document.getElementsByTagName('ul');
console.log('ByTagName---', heroListByTagName);

//第三种
var heroListByClassName = document.getElementsByClassName('she-shou');
console.log('heroListByClassName---', heroListByClassName);

//第四种
var heroListByName = document.getElementsByName('hero-box');
console.log('heroListByName---', heroListByName);

以上例程会输出：    

40、setAttribute

setAttribute() 方法创建或改变某个新属性。

如果指定属性已经存在,则只设置该值。

var div = document.getElementById("myDiv");
div.setAttribute("style", "background-color: blue;");