web总结-js（2）

学习目标：

1.查找字符串中某个字符位置
2.根据位置返回字符
3.统计出现次数最多的字符
4.字符串操作方法
5.字符串总结
6.DOM内容
1）getElementById
2) getElementByTagName
3) html5新增的获取元素的方法
4）获取特殊标签方法
5）事件三要素

学习内容：

1.查找字符串字符出现次数
核心算法：先查找第一个字符处先的位置，因为indexof返回的结果不是-1就继续往后查找，因为indexof只能查找第一个所有后面的查找一定是当前索引加一。

 <script>
        //查找字符串abcdoefoxyozzopp中所有o出现的位置及次数
        //核心算法：先查找第一个o出现的位置
        //因为indexof返回的结果不是-1.就继续往后查找
        //因为indexof只能查找第一个所有后面的查找，一定是当前索引加一
        var arr = "abcdoefoxyozzopp"
        var index = arr.indexOf('o')
        console.log(index);
        while (index !== -1) {
            console.log(index);
            index = arr.indexOf('o', index + 1)
        }

2.根据位置返回字符
charAt（index）根据位置返回字符
charCodeAt（index）返回相应索引号的ASC码值，判读用户按下哪个键。
str[index] h5新增的，返回索引位置处字符。

    <script>
        //根据位置返回字符
        //charat（index）更具位置返回字符
        var str = 'andy'
        console.log(str.charAt(3));
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        //charCodeAt（index）返回相应索引好ASCLL值，判读用户按下的那个键
        console.log(str.charCodeAt(0));
        //str[index]h5新增的 返回索引位置处字符
    </script>

3.统计出现次数最多的字符

<script>
   var str = 'abcdoefoxyozzopp'
        var o = {}
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i)//循环取出str中的每个字符。
            if (o[chars]) {//判断o中是否存在该属性，若存在则该属性加一
                o[chars]++
            }
            else {
                o[chars] = 1;//若不存在则设立该属性为1.
            }
        }
        console.log(o);
        var max = 0//定义一个最大值，循环遍历o，查找该对象中元素最大的那个
        var ch = ''
        for (var k in o) {
            //k时属性名
            //o[k]是属性值
            if (o[k] > max) {
                max = o[k]
                ch = k
            }
        }
        console.log(max);
        console.log(ch);
    </script>

4.字符串操作方法
str.substr(位置，个数）规定起始位置和取出个数取出字符串，
str.concat(‘字符’)字符串拼接，在当前字符串后拼接输入的字符串。
str.replace('字符1‘，’字符2‘)将字符串str中字符1替换为字符2，当前操作只能替换遇到的第一个字符1.连续替换可用while循环。

<script>
        var str = '改革春风吹满地'
        console.log(str.substr(2, 2));
        //第一个2是开始索引号，第二个二是取几个字符
        var str1 = 'andy'
        console.log(str1.concat('red'));
        //字符串拼接
        var str2 = 'andyanddy'
        //替换字符replace只会替换第一个字符
        console.log(str2.replace('a', 'b'));
        var str3 = 'abcdoefoxyozzopp'
        while (str3.indexOf('o') !== -1) {
            str3 = str3.replace('o', '#')
        }
        console.log(str3);
    </script>

5.DOM内容学习
1）getElementById
参数id是大小写敏感的字符串
返回的是一个元素对象

<script>
        //参数id是大小写 铭感的字符串
        //返回的是一个元素对象
        var namer = document.getElementById('name');
        console.log(namer);
        console.log(typeof namer);
        console.dir(namer)
        //console.dir 打印返回的元素对象，更好的查看里面的属性和方法
    </script>

2）getElementByTagName
获取的是指定标签名的对象，返回的是获取过来元素对象的集合，以伪数组的形式存储。
如果页面中只有一个li，则返回的还是伪数组的形式。
如果页面中没有这个元素，返回的是空的伪数组形式。
element.getElementsByTagName('标签名’）父元素必须是指定的单个元素。
例如：
var ol = document.getElementById('ol'); console.log(ol.getElementsByTagName('li'));

<script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>

3）HTML5新增的获取方法。
1.document.getElementsByClassName(‘box’)根据类目获取某些元素的集合。
2.document.querySelector(’.box’)只会获取到第一个名为box的类。#nav id名的获取，

    <script>
        //document.getElementsByClassName('box')根据类名获取某些元素的集合
        var boxs = document.getElementsByClassName('box')
        console.log('box');
        var firstbox = document.querySelector('.box')
        // document.querySelector('#nav')选择第一个元素
        var nav = document.querySelector('#nav')
        console.log('nav');
        //document.querySelectorAll('.box') 获取所有
        console.log(allbox);
        var allbox = document.querySelectorAll('.box')
        console.log(allbox);
    </script>

4）特殊标签的获取
1.var body = document.body 获取body标签元素
2.var htmlele = document.documentElement获取html标签中元素。

<script>
        var bodyele = document.body;
        console.log(bodyele);
        console.dir(bodyele)
        var htmlele = document.documentElement;
        console.log(htmlele);
    </script>

学习时间：

2021.9.14日