BOM-DOM

BOM        浏览器对象模型

window对象

location

location.href        获取URL
location.href='URL'  跳转到指定页面
location.reload()    刷新,重新加载页面

 

弹出框   alert('python')
确认框   confirm('你确定吗?')
提示框   prompt('请在下方输入','你的答案')

 

setTimeout

setTimeout('JS语句',毫秒数)        一段时间后做某件事情

var t = setTimeout(function(){alert('123');},3000);      # 3秒后出现弹出框,内容为123,返回一个随机id值,用t接收一下
clearTimeout(t);                                         # 取消定时器装置,如果在3秒内clear,弹出框不会出现

 

setInterval

setInterval('JS语句',毫秒数)    每隔一段时间做某件时间

var s = setInterval(function(){console.log('123');},3000);    # 每隔3秒打印一次123,也会返回随机id值,用s接收
clearInterval(s);                                             # 取消setInterval设置

 

DOM    文档对象模型

查找标签

直接查找

document.getElementById()           根据ID获取一个标签
document.getElementsByClassName()   根据class属性获取(可以获取多个元素,所以返回的是一个数组)
document.getElementsByTagName()     根据标签名获取标签合集

间接查找

标签对象.parentElement            父节点标签元素
标签对象.children                 所有子标签
标签对象.firstElementChild        第一个子标签元素
标签对象.lastElementChild         最后一个子标签元素
标签对象.nextElementSibling       下一个兄弟标签元素
标签对象.previousElementSibling   上一个兄弟标签元素

 

标签操作

创建标签     createElement('标签名')

a = document.createElement('a');

 

添加标签

在最后追加一个子节点     标签对象.appendChild('标签名')
在某个节点前面增加节点   标签对象.insertBefore('标签名',指定标签元素)

 

删除标签

标签对象.removeChild(标签对象)    通过父标签删除

 

替换标签

标签对象.replaceChild(新标签对象,要替换的标签对象)    通过父标签替换

 

文本操作

标签对象.innerText    获取标签和内部所有标签的文本内容
标签对象.innerText = '文本'    设置标签的文本内容
标签对象.innerHTML     获取标签内的所有内容,包括文本和标签
标签对象.innerHTML = '文本'     HTML可以识别字符串内的标签,text不能识别

 

属性操作

attribute属性操作
标签对象.setAttribute("属性名","属性值")      添加自定义属性
标签对象.getAttribute("属性名")               通过属性名获取值
标签对象.removeAttribute("属性名")            删除属性

标签自带的属性可以直接通过.的方式来获取,自定义的属性不可以

 

获取值操作

标签对象.value
标签对象.value = '内容'    给标签赋值

适用于 input select textarea

 

css直接的样式操作

对于没有中横线的CSS属性一般直接使用style.属性名
    标签对象.style.margin = 0
对含有中横线的CSS属性,将中横线后面的第一个字母换成大写
    标签对象.style.backgroundColor = 'red';

 

class操作

className   获取所有样式类名
标签对象.classList
标签对象.classList.add(类名)          添加类
标签对象.classList.contains(类名)     判断是不是包含类名,返回布尔值
标签对象.classList.toggle(类名)       切换 存在就删除,不存在就添加

 

事件

onclick        当用户点击某个对象时调用的事件句柄
ondblclick     当用户双击某个对象时调用的事件句柄
onfocus        元素获得焦点               
onblur         元素失去焦点               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)
onkeydown      某个键盘按键被按下         应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开
onkeyup        某个键盘按键被松开
onload         一张页面或一幅图像完成加载
onmousedown    鼠标按钮被按下
onmousemove    鼠标被移动
onmouseout     鼠标从某元素移开
onmouseover    鼠标移到某元素之上
onselect      在文本框中的文本被选中时发生
onsubmit      确认按钮被点击,使用的对象是form

 

绑定方式

// 在标签内部
<body>
<div id="d1" onclick="f1(this);">这是div</div>
</body>
<script>
    function f1(ths) {
        ths.style.backgroundColor="green";
    }
</script>
方法一
// 仙女找到需要绑定的标签对象,直接定义函数
<body>
<div id="d1">这是div</div>
</body>
<script>
    dive = document.getElementById('d1');
    dive.onclick = function () {
        this.innerText="哈哈哈";                 # 哪个标签触发,就将哪个标签对象传给this
    }
</script>
方法二(常用)

 

onload

window.onload事件在文件加载过程结束的时候触发

.onload()函数存在覆盖现象 不可以写多个onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="timer">
<button id="start" >开始</button>
<button id="end" >结束</button>
</body>
<script>
    var btn1 = document.getElementById('start');
    var btn2 = document.getElementById('end');
    var interval_sign;
    function t() {
        // 设置定时器获取本地时间
        var time = new Date();
        var time_str = time.toLocaleString();
        //将时间放进input框内
        var inpe = document.getElementById('timer');
        inpe.value = time_str;
    }
    btn1.onclick = function () {
        //先开启定时器
        t();
        //为了确保不管点击多少次开始,都只开启一个定时器,需要设置全局变量做判断
        if (interval_sign === undefined) {
            interval_sign = setInterval(t,1000);
        }
    }
    btn2.onclick = function () {
        //清除定时器设置
        clearInterval(interval_sign);
        //将全局变量设置成原始状态,下次开启时,需要重新做判断
        interval_sign = undefined;
    }
</script>
</html>
input时间控制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
省份:<select name="" id="province"></select>
城市:<select name="" id="city"></select>
</body>
<script>
    var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    var pro = document.getElementById('province');
    var cit = document.getElementById('city');
    for(var one_pro in data) {
        //创建选项标签
        var ope = document.createElement('option');
        //将对象中的数据添加到标签内容中
        ope.innerText = one_pro;
        //将option标签添加到下拉框中
        pro.appendChild(ope);
    }
    var init_value = pro.value;
    if (!init_value) {
    }else {
        var init_city_list = data[init_value];
        for (var init_one_city in init_city_list) {
            var  init_opt_city = document.createElement('option');
            init_opt_city.innerText = init_city_list[init_one_city];
            cit.appendChild(init_opt_city)
        }
    }
    pro.onchange = function () {
        //清除之前的city数据
        cit.innerText = '';
        var select_pro = this.options[this.selectedIndex].innerHTML;
        //获取省份对应的城市数组
        var city_list = data[select_pro];
        //循环将城市数据添加到option标签内
        for(var city in city_list) {
            var ope_city = document.createElement('option');
            ope_city.innerText = city_list[city];
            //将option标签添加到city的下拉框中
            cit.appendChild(ope_city)
        }
    }

</script>
</html>
下拉框联动

 

posted @ 2019-03-20 19:42  Sandy-123  阅读(197)  评论(0编辑  收藏  举报