【无标题】HTML之js操作

一、浏览器窗口内置对象

window.location.href = url; 修改当前浏览器窗口显示的资源路径
var searchStr = window.location.search; 静态页面跳转传值

 

二、js获取html标签对象
1.根据选择器获取
（1）根据id获取唯一对对象
var e = document.getElementByld(idStr);
（2）根据类class选择器获取对象数组
var arr = document.getElementsByClassName(classStr);
（3）根据标签选择器获取对象数组
var arr = document.getElementsByTagName(tagName);
（4）根据表单元素的name属性获取
var arr = document.getElementsByName(formEIname);
2.根据家族关系：var ref = …
（1）获取子元素数组：var childs = ref.children;
（2）获取兄弟元素:
var nextEi= ref.nextElementSibling;
var prevEi= ref.previousElementSibling;
（3）获取父级元素：var parenEi = ref.parentElement;
三、js创建html标签对象
var newEi = document.createElement(eiName);
四、js操作html标签对象 var el = …
1.操作值
（1）表单元素的值： var val = el.value; el.value = new_value;
（2）非表单元素的文本：var txt = el.innerText; el.innerText = new_txt;
（3）非表单元素的内部结构： var structor = el.innerHTML; el.innerHTML = new_structor;
2.操作属性
（1）var attrVal = el.attr; el.attr=new_attr;
3.操作样式
（1）具体样式：el.style.xxxYyy = “value”;
（2）类选择器：el.className = “cn”;
el.classList.add(cn…);
el.classList.remove(cn…);
var bool = el.classList.contains(cn);
el.classList.toggle(cn);
4.操作子元素
添加子元素: el.appendChild(tagEl);
删除子元素: el.remove();
五、事件、事件函数、事件绑定函数
1.事件
（1）onclick
（2）onkeydown
（3）onkeyup
（4）onkeypress
（5）onfocus
（6）onblur
（7）onmouseenter onmouseover
（8）onmouseleave onmouseout
（9）onmousemove
（10）onscroll
2.事件函数：就是没有参数，没有返回值的普通函数
3.如何捆绑：标签对象.事件=函数