JS核心概念与DOM操作-优快云博客

web(12.21-21.22)

1.js为什么不能对集合中的对象进行统一操作？

js不能进行隐式迭代，即不能一次操作多个对象，需要对集合内每个元素进行操作时，得单独获取每一个对象再进行操作。

2.事件的委托：父元素委托事件给子元素执行
实例1:

<ul>
    <li class="lists">元素1</li>
    <li class="lists">元素2</li>
    <li class="lists">元素3</li>
    <li class="lists">元素4</li>
     <p>元素5</p>
</ul>
<script>
    var uls=document.getElementsByTagName("ul")[0];
    uls.onclick=function(){        //给父元素ul绑定事件
        console.log(1);            //点击子元素，执行该代码
    }
</script>

//若只将父元素事件委托给"li"子元素，则:
<script>
var uls=document.getElementsByTagName("ul")[0];
uls.onclick=function(e){
     //获取执行点击事件的对象
    var target= e.target|| e.srcElement;
       //判断当前对象的节点名称是否为”LI“（默认名称为大写）  
        if(target.nodeName=="LI") {   
            console.log(1);          //节点名称为”LI“输出1
        }
    }
</script>

3.关于this（一般出现在函数中）：this的两种指代

指window对象

<script>
   console.log(this);    //输出window对象
</script>

指当前的dom元素对象

<p onclick="method(this)">按钮</p>    //点击该元素，输出p元素
<script>
    function method(arg){
        console.log(arg);
    }
</script>

4.dom元素操作

1.dom的节点属性

节点属性	描述
nodeName	节点名称，默认大写
nodeType	节点类型，元素节点返回1，文本节点返回3，注释节点返回8
childNodes	返回子节点集合NodeList (包括每个节点的索引值，类型和集合长度)
children	返回所有子元素
childNodes[索引值]	以实例1为例，childNodes[0]输出 [“元素1”]
nodeValue	节点值,以实例1为例, childNodes[0].nodeValue 输出[元素1]
uls.childElementCount	子元素的个数
previousSibling	前一个同胞节点
previousElementSibling	前一个同胞元素
nextSibling	后一个同胞节点
nextElementSibling	后一个同胞元素
firstElementChild	第一个子元素
firstChild	第一个子节点
lastElementChild	最后一个子元素
lastChild)	最后一个子节点

注：注意区分子节点和子元素

2.dom元素方法

方法	描述
offsetLeft	元素左偏移量
offsetTop	元素上偏移量
offsetHeight	返回元素高度，包括边框和填充
offsetWidth	返回元素宽度，包括边框和填充
offsetParent	返回元素的偏移容器，即父容器

5.数组方法

every()：利用指定函数检测数组中是否每个元素都符合条件,符合返回true，不符合返回false；参数为function,数组中每个元素都会执行这个函数，该方法不会改变原始数组；实例：

<script>
    var a=[2,3,4,5,12,3];
    function method(arg){
        return arg>4;        //判断数组中是否每个元素都大于4
    }
    console.log(a.every(method));   //输出false
</script>

fill(替换值,起始位置,结束位置)：用固定值替换数组元素，当参数只有"替换值"时，是将数组所有元素进行替换；实例：

<script>
 var b=["we","you","he"];
    console.log(b.fill("我被替换了",1,2));  
    //将b数组索引值为1到2的元素用"我被替换了"替换
</script>

find()：利用指定函数找到数组中第一个符合条件的元素,并返回该元素；参数为function，该方法不会改变原始数组；实例：

<script>
    var a=[2,3,4,5,12,3];
    function method(arg){
        return arg>4;        //判断数组中是否每个元素都大于4
    }
    console.log(a.find(method));   //输出false
</script>

forEach()：遍历整个数组；参数为function,无返回值，输出为undefined；实例：

<body>
<p>结果为：<span></span></p>
<script>
var a=[2,3,4,5,12,3];
    var spans=document.getElementsByTagName("span")[0];
    function method(item,index,arr){
        arr[index]=item*4;   //数组中每个元素乘以4
        spans.innerHTML=arr;
    }
    console.log(a.forEach(method));    //输出undefined
</script>
</body>

map():映射方法，按数组元素顺序依次处理元素，返回一个新数组，不会改变原始数组；实例：

<script>
var a=[2,3,4,5,12,3];
var newa= a.map(function(val){
        return  val+3;
    })
    console.log(a);   //输出  [2,3,4,5,12,3]
    console.log(newa);   //输出 [5, 6, 7, 8, 15, 6]
<script>

filter(): 返回条件的所有数组元素，不会改变原始数组；实例:

<script>
    var b=["we","you","he"];
    var filter1= b.filter(function(val){
        if(val=="we"){
            return val;    //
        }
    })
    console.log(filter1);
</script>

some()：利用指定函数判断数组中是否有符合条件的元素,有元素符合返回true,没有返回false；参数为function，该方法不会改变原始数组；实例：

<script>
var a=[2,3,4,5,12,3];
 var somes= a.some(function(val){
        return val>15;
    })
    console.log(somes);
</script>

slice(start,end)：从（start+1）号位置开始截取到end号元素，返回被截取的部分，不会改变原始数组；
splice(start,count)：从（start+1）号位置开始截取count个元素，返回被截取的部分，原始数组改变；
reduce()：将数组中的元素逐个缩减，最终计算成一个值；实例：

var arr1=[1,2,3,4,5,6];
    var sum=arr1.reduce(function(val1,val2){
          return val1+val2;
    })
    console.log(sum);

push() ：后追加
unshift()：前追加
pop() 后删除
shift() 前删除

6.字符串方法

concat()：将两个或多个字符的文本组合起来，返回一个新的字符串。
indexOf(“目标子串”，start)：从start位置开始，返回字符串中目标子串出现的第一个位置的索引，如果没有匹配项，返回 -1 ；
charAt()：返回指定位置的字符。
lastIndexOf(“目标子串”)：返回字符串中目标子串最后一处出现位置的索引，如果没有匹配项，返回 -1 ；
substring(start，end)：返回字符串的一个子串，取前不取后；
substr(start,length)：返回字符串的一个子串；
replace(“待匹配的旧字符串”,“新字符串”)：使用新字符串代替匹配的字符串；
search(“目标子串”)：查找目标子串，返回字符串中匹配的索引值，否则返回 -1；
slice()：提取字符串的一部分，并返回一个新字符串（与 substring 相同）；
split(“划分的符号”)：将一个字符串划分成一个字符串数组；
toLowerCase()：将整个字符串转成小写字母；
toUpperCase()：将整个字符串转成大写字母；

7.获取页面的宽高

可视区域高：document.documentElement.clientHeight；
可视区域宽：document.documentElement.clientWidth;
body的真实高：document.body.clientHeight;
body的真实宽：document.body.clientWidth;
屏幕宽和高不包含任务栏
window.screen.availHeight;
window.screen.availWidth；
屏幕的实际宽和高包含任务栏
window.screen.height;
window.screen.width;
浏览器上边距和左边距
window.screenTop;
window.screenLeft;
滚动条上下、左右滑动距

window.scrollX;
window.scrollY;
document.documentElement.scrollTop;
document.documentElement.scrollLeft;