JS简单入门学习笔记三DOM_dom判断当前高度范围的数据-CSDN博客

DOM浅析

document对象 window.document
文档、元素、属性、文本
DOM属于BOM的一部分
父、子、同胞节点

Document 对象属性和方法

document.getElementById("id") 通过ID获取元素
document.getElementsByName("name") 带有指定名称的对象集合
document.getElementsByTagName("tag") 带有指定标签名的对象集合
document.getElementsByClassName("class") 文档中所有指定类名的元素集合,IE8及以下不支持
document.body 返回文档的body元素
document.documentElement 返回文档的根节点
document.all document.all.length所有元素的长度，但打印document.all是undefined？？？
- getElementsByTagName("*")效果相同
----document.querySelector(".class/#id/div") 返回文档中匹配指定的CSS选择器的第一元素
----document.querySelectorAll(".class/#id/div") 返回文档中匹配的CSS选择器的所有元素节点列表

元素对象属性和方法

element.childNodes 返回元素的一个子节点的数组
- 获取文本在内的所有节点
element.children 返回元素的子元素的集合
element.firstChild 返回元素的第一个子节点
element.parentNode 返回元素的父节点
element.lastChild 返回的最后一个子元素
element.previousSibling 返回某个元素紧接之前节点
element.previousElementSibling 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
element.nextSibling 返回该元素紧跟的一个节点
element.nextElementSibling 返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。
element.innerHTML 设置或者返回元素的内容。
element.value 设置或者返回属性值
attr.innerText 获取文本值
element.nodeValue 返回元素的节点值
element.clientHeight 在页面上返回内容的可视高度
element.clientWidth 在页面上返回内容的可视宽度
- 直接返回数字，可以直接计算
- 不包括边框，边距或滚动条
element.offsetHeight 返回元素的高度
element.offsetWidth 返回元素的宽度
- 包括边框和填充，但不是边距
element.offsetParent 返回元素的偏移容器（定位父元素）
- 会获取离当前元素最近的开启了定位的祖先元素
- 如果都没有定位，则返回body
element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器
element.offsetTop 返回当前元素的相对垂直偏移位置的偏移容器
element.scrollHeight 返回整个元素的高度
element.scrollWidth 返回元素的整个宽度
- 包括滚动条
element.scrollLeft 返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离

scrollHeight - scrollTop == clientHeight 说明垂直滚动条滚动到底了

操作节点

// 不支持新增属性
- 对象.属性
- 对象.属性=""

// 支持新增属性
// 拿到的属性永远是默认值：（defaultValue）
- 对象.getAttribute("属性")；
- 对象.setAttribute("属性","值")；

如果是节点原有的属性，那么就会使用对象.属性
如果是新增的属性，使用对象.get/setAttribute();

操作元素的文本

.innerHTML 获取或设置元素内的HTML
outerHTML 设置或获取对象及内容的HTML形式
innerTEXT 设置或获取位于对象内的文本
outerTEXT 设置（包括标签）或获取（不包括标签）对象的文本

操作元素的层次结构

创建子节点
1.创建节点
.createElement("")
2.获取父节点
3.追加节点
.appendChild()
删除子节点
1.获取父节点
2.删除子节点
.removeChild()
替换子节点
1.获取父节点
2.获取要替换的子节点
3.创建新的节点
4.替换的节点
.replaceChild(newSon, son)
.insertBefore(newItem,existingItem)现有的子元素之前插入一个新的子元素
.innerHTML 设置或者返回元素的内容。

操作元素的内联样式

设置元素样式
.className = "" 设置类名
.style.样式名 = "样式值" 操作样式
注：JS不支持“-”，要修改为驼峰命名法，例如：“background-color”要写为“backgroundColor”。
读取元素样式
.style.样式名

设置和读取的都是内联样式

获取元素的样式
.currentStyle.样式名 当前元素正在显示的样式，只有IE支持
getComputedStyle(元素,null).样式名 获取当前元素样式，IE9及以上支持
- 需要两个参数
  第一个，要获取样式的元素
  第二个，一般为null，可以传递一个伪元素
- 该方法会返回一个对象，对象中封装了当前元素对应的样式
适应浏览器

function getStyle(obj,name) {
	if(window.getComputedStyle){
		return getComputedStyle(obj,null)[name];
	} else {
		return obj.currentStyle[name];
	}
}

DOM 事件

当事件响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件中封装当前事件相关的一切信息，比如：鼠标坐标、键盘哪个按键被按下、鼠标滚轮滚动方向

鼠标事件

onclick 当用户点击某个对象时调用的事件句柄。
- HTML 中:<element onclick="SomeJavaScriptCode">
- JavaScript 中:object.onclick=function(){SomeJavaScriptCode};
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousemove 鼠标被移动。

滚轮事件

onmousewheel 已废弃。使用 onwheel 事件替代
鼠标滚轮在元素上下滚动时触发
语法:
HTML 中：
<element onwheel="myScript">
JavaScript 中：
object.onwheel=function(){myScript};
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("wheel", myScript);
- event.wheelDelta可以获取鼠标滚轮的滚动方向
  向上滚120，向下滚-120，不看大小，只看正负
- 但火狐不支持，使用 event.detail
  向上滚-3，向下滚3
  取消默认行为：event.preventDefault()

键盘事件

一般会绑定给可以获取焦点的对象

onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开

框架/对象（Frame/Object）事件

onload 一张页面或一幅图像完成加载
onerror 在加载文档或图像时发生错误。 ( < object >, < body >和 < frameset >)
onresize 窗口或框架被重新调整大小。
onscroll 当文档被滚动时发生的事件。

表单事件

onfocus 元素获取焦点时触发
onselect 用户选取文本时触发 ( < input > 和 < textarea >)
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( < input >, < keygen >, < select >, 和 < textarea >)
onsubmit 表单提交时触发

其他事件

事件对象

鼠标事件对象

clientX 返回当事件被触发时，鼠标指针的水平坐标
clientY 返回当事件被触发时，鼠标指针的垂直坐标
- 相对于可见窗口
- IE8及以下浏览器中，响应函数被触发时，浏览器不会传递事件对象，，而是将事件对象作为window对象的属性保存的，所以event实参前应该加window.，但火狐又不兼容了,应该判断：

if(!event) {
	event = window.event;
}

或者

event = event || window.event;

pageX
pageY
- 获取鼠标相对于当前页面的坐标
- 不支持IE8及以下，需兼容IE8则不要使用

当有滚动条时，兼容浏览器

var st = document.body.scrollTop || document.documentElement.scrollTop;
var top = event.clientY;
box1.style.top = top + str + "px"

keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码
altKey 返回当事件被触发时，“ALT” 是否被按下(true/false)
ctrlKey 返回当事件被触发时，“CTRL” 键是否被按下(true/false)
shiftKey 返回当事件被触发时，“SHIFT” 键是否被按下(true/false)
button 返回当事件被触发时，哪个鼠标按钮被点击

事件委派

将事件统一绑定给元素的共同的祖先元素，当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数处理事件
event.target 触发事件的对象

事件绑定

使用对象.事件 = 函数的形式绑定响应函数，只能为元素绑定一个相同事件

为元素的相同事件绑定多个响应函数

addEventListener(event, function, useCapture);

参数：

事件的字符串，不要on
回调函数，当事件触发时该函数会被调用
是否在捕获阶段触发事件，true或false

移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

使用addEventListener()绑定响应函数时，取消默认行为不能用return false，要用event.preventDefault();
IE8 不支持，判断event.preventDefault && event.preventDefault()

IE8及更早不支持使用

element.attachEvent(event, function);
element.detachEvent(event, function);

参数：

事件的字符串
回调函数
不同的是它后绑定先执行，执行顺序和addEventListener()相反

不同

addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window

需要统一两个方法this

参数
obj 要绑定事件的对象
eventstr 事件的字符串（不要on）
callback 回调函数

function bind(obj,eventStr,callback) {
	if(obj.addEventListener) {
		// 大部分浏览器兼容的方式
		obj.addEventListener(eventStr,callback,false);
	} else {
		/*
		 * this是谁由调用方式决定
		 * callback.call(obj)
		*/
		// IE8及以下
		obj.attachEvent("on" + eventStr,function(){
			// 在匿名函数中调用回调函数
			callback.call(obj);
		});
	}
}

//在函数中使用
bind(btn01,"click",function(){
	alert("");
})

事件冒泡（bubbles）

就是事件向上传导，后代元素的事件被触发时，其祖先元素的相同事件也会被触发

指定 “useCapture” 参数来设置传递类型（false:事件冒泡，true:事件捕获）

addEventListener(event, function, useCapture);

取消冒泡
event.cancelBubble = true;

拖拽

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var img1 = document.getElementById("img1");
//开启box1拖拽
drag(box1);
//开启box2拖拽
drag(box2);
// 开启img1拖拽
drag(img1);
/*
 * 提取一个专门设置拖拽的函数
 */
function drag(obj) {
    obj.onmousedown = function (event) {
        /*
         * 设置box1捕获所有鼠标按下事件，防止IE8及以下全选时，拖拽出错
         * setCapture()；
         * 只有IE支持，但在火狐中不会报错，
         * chrome中会报错
         * if(box1.setCapture){
         *  box1.setCapture();
         * }
        */

        obj.setCapture && obj.setCapture();
    
        event = event || window.event;
        // div的偏移量 鼠标.clientX - 元素.offsetLeft;
        // div的偏移量 鼠标.clientY - 元素.offsetTop;
        var ol = event.clientX - obj.offsetLeft;
        var ot = event.clientY - obj.offsetTop;
        document.onmousemove = function (event) {
            event = event||window.event;
            // 获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY -ot;
            obj.style.left = left + "px";
            obj.style.top = top + "px";
        };
        // 防止拖拽到box2底部时松开不生效，把事件添加给document
        document.onmouseup = function () {
            document.onmousemove = null;
            // 取消document.onmouseup事件，防止在非box1处松开触发事件
            document.onmouseup = null;
            // 取消事件捕获
            obj.releaseCapture && obj.releaseCapture();
        
            // alert("我松开了");
        };
        /*
         * 拖拽网页中内容时，浏览器会默认去搜索引擎中搜索拖拽内容
         * 全选时，会导致拖拽出错，可以通过return false来取消默认行为
         */
        return false;
    }
}

操作表单对象

获取form表单
通过id
通过名字document.formname
操作表单的属性
method 控制表单的提交方式
action 控制表单的提交地址
elements
操作表单的方法
.submit() 提交表单数据
.reset() 重置表单数据

操作表单域对象

获取表单域
id
name
属性
.form 获取当前元素对应的表单
.type 获取元素的类型
.disabled
方法
.focus()
.blur()

操作多选按钮

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选按钮</title>
</head>
<body>
<input type="checkbox" value="1" name="music">红雪莲
<br>
<input type="checkbox" value="2" name="music">胡楼哇
<br>
<input type="checkbox" value="3" name="music">奥特曼
<br>
<input type="checkbox" value="4" name="music">素颜
<br>
<input type="checkbox" value="5" name="music">王菲
<br>
<input type="checkbox" value="6" name="music">喜欢你
<br>
<input type="checkbox" value="7" name="music">红日
<br>
<input type="checkbox" value="8" name="music">小叮当
<hr>
<button onclick="operCheckbox()">添加到播放按钮</button>
<button onclick="choose01('all')">全选</button>
<button onclick="choose01('no')">全不选</button>
<button onclick="choose01('fx')">反选</button>
</body>
<script>
    function operCheckbox() {
        // 声明一个变量来存放选择的歌值
        var arr = [];
        // 获取当前歌曲名单
        var music = document.getElementsByName("music");
        //循环并判断是否被选取
        for (var i = 0; i < music.length; i++) {
            //判断
            if(music[i].checked) {
                arr.push(music[i].value);
            }
        }
        // 打印
        alert(arr)
    }
    function choose01(operate) {
        //获取所有歌曲
        var music = document.getElementsByName("music");
        // 遍历
        for (var i = 0; i<music.length;i++) {
            // 判断类型
            if (operate =="all") {
                music[i].checked = true;
            } else if (operate == "no") {
                music[i].checked = false;
            } else if (operate == "fx") {
                music[i].checked = !music[i].checked;
            }
        }
    }
</script>
</html>

操作下拉列表

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作下拉列表</title>
</head>
<body>
<select id="school" multiple="multiple">
    <option value="1">北京大学</option>
    <option value="2">清华大学</option>
    <option value="3">南开大学</option>
    <option value="4">复旦大学</option>
    <option value="5">交通大学</option>
    <option value="6">浙江大学</option>
    <option value="7">哈佛大学</option>
    <option value="8">理工大学</option>
    <option value="9">捡钱大学</option>
</select>
<button onclick="operateSelect()">操作下拉列表</button>
</body>
<script>
    function operateSelect() {
        // 获取元素
        var school = document.getElementById("school");
        /***********单选按钮*********/
        // 获取值
        // alert(school.value);
        // 获取被选择的索引
        // alert(school.selectedIndex);
        // 获取当前下拉列表所有的选择项
        // alert(school.options.length)
        // option是一个对象，text，value
        // alert(school.options[school.selectedIndex].text);
        /***********复选按钮*********/
        var arr = [];
        var os = school.options;
        // 遍历并判断
        for (var i = 0; i < os.length; i++) {
            if (os[i].selected) {
                arr.push(os[i].text);
            }
        }
        alert(arr)
    }
</script>
</html>