html之js操作

一、浏览器窗口内置对象
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.如何捆绑:标签对象.事件=函数