JavaScript日记（十）

在document中有一个属性body，它保存的是body的引用：document.body

document.documentElement保存的是HTML根标签

document.all代表页面中所有的元素，相当于document.getElementsByTagName（“*”）

getElementsByClassName()可以根据元素的class属性值查询一组元素节点对象，但该方法不支持IE8及以下的浏览器

document.querySelector(“.class  div”)需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象，使用此方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

document.querySelectorAll(“.class  div”)用法类似，不同的是它会将符合条件的元素封装到一个数组中返回

DOM增删改：

document.createElement()可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回返回

document.createTextNode()可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

appendChild()可以向一个父节点中添加一个新的子节点：父节点.appendChild(子节点);

insertBefore()可以在指定子节点前插入新的子节点：父节点.insertBefore(新节点,旧节点);

replaceChild()可以使用指定子节点替换原有子节点：父节点.replace(新节点,旧节点);

removeChild()可以删除子节点：父节点.removeChild(子节点); 或 子节点.parentNode.removeChild(子节点);

使用innerHTML()也可以完成DOM的增删改的相关操作，一般会两种方式结合使用

点击超链接后，超链接会跳转页面，这个是超链接的默认行为，如果不希望出现默认行为，可以通过在响应函数的最后return false;来取消默认行为

comfirm()用于弹出一个带有确认和取消按钮的提示框，参数为提示文字，用户点击确认返回true，取消返回false

var flag=comfirm("确认删除吗");
if(flag){
//删除操作;
}

DOM操作内联样式：

通过JS修改元素样式：元素.style.样式名=样式值，如果CSS的样式名中含有“-”是不合法的，需要将这种样式名修改为驼峰命名（background-color修改为backgroundColor）。通过style属性设置的样式都是内联样式，具有较高优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了“important！”，则此样式会拥有最高优先级，即使通过JS也不能覆盖该样式。

读取样式：元素.style.样式名，通过style读取和设置都是操作内联样式，无法读取样式表中的样式

获取元素当前显示的样式：元素.currentStyle.样式名，如果当前元素没有设置该样式，则获取它的默认值，但此方法只有IE浏览器支持。在其他浏览器中可以使用getComputerStyle()来获取当前元素的样式，这个方法是window的方法，可以直接使用，需要两个参数，第一个是要获取样式的元素，第二个可以传递一个伪元素，一般都传null，该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值（例如，没有设置width，它不会获取到auto，而是一个长度），该方法不支持IE8及以下浏览器。通过currentStyle和getComputerStyle()读取到的样式都是只读的，不能修改，如果要修改则必须通过style属性

var width=getComputerStyle(box1,null).width;

同时兼容IE和其他浏览器的方法：

//定义一个函数，用来获取指定元素的当前的样式
//第一个参数是要获取样式的元素，第二个参数是要获取的样式名
function getstyle(obj,name){
    if(window.getComputerStyle){
        //正常浏览器的方式，具有getComputerStyle()方法
        return getComputerStyle(obj,null)[name];
    }else{
        //IE8的方式，没有getComputerStyle()方法
        return obj.currentStyle[name];
    }
}
//return window.getComputerStyle?getComputerStyle(obj,null[name]:obj.currentStyle[name];
/*
//这种方法也可以但不推荐，最好先判断getComputerStyle()方法
if(obj.currentStyle){
    return obj.currentStyle[name];
}else{
    return getComputerStyle(obj,null)[name];
}
*/

其他样式相关属性：

clientWidth，clientHeight这两个属性可以获取元素的可见宽度和高度，包括内容区和内边距。这些属性都是不带px的，返回一个数字，可以直接进行计算，属性只读，不能修改

offsetWidth，offsetHeight获取元素的整个宽度和高度，包括内容区、内边距和边框

offsetParent用来获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位（id）的祖先元素，如果所有的祖先元素都没有开启定位，则返回body

offsetLeft，当前元素相当于其定位元素的水平偏移量（padding）；offsetTop，当前元素相对于其定位元素的垂直偏移量

scrollWidth，scrollHeight获取元素整个滚动区域的高度

scrollLeft，scrollTop获取水平和垂直滚动条滚动的距离。当满足scrollHeight-scrollTop==clientHeight时，说明垂直滚动条滚动到底了，水平滚动条同理

onscroll事件，会在元素的滚动条滚动时触发

(作者观看的学习视频：B站尚硅谷）