Bom与Dom

BOM操作
DOM操作
查找标签
节点操作
事件绑定
window.onload

1|0BOM操作

操作浏览器，需要调用window对象，它是所有浏览器都支持的对象，表示的就是浏览器窗口

window对象可以通过点调用子对象

window.navigator

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

window.screen

window.history

history.forward()  // 前进一页
history.back()  // 后退一页

window.location(重点)

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

弹出框

警告框(alert)
确认框(confirm)
提示框(prompt)

计时器相关(重点)

setTimeout与clearTimeout(设置单次定时触发，清除)

setInterval与clearInterval(循环触发，清除)

function f1() {
    alert(123);
}

function clear() {
    var t = setInterval(f1,3000);
    function inner() {
        clearInterval(t);
    }
    setTimeout(inner,9000)
}
clear();

2|0DOM操作

通过JS代码操作html页面，实现相应效果

要想操作html页面，实现相应动态效果，第一步还是得先解决查找标签的事情

3|0查找标签

直接查找

document.getElementById
document.getElementsByClassName
document.getElementsByTagName

间接查找

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

js代码在书写时，一定要保证在页面html文件全部加载完毕后才能正常执行，否则报错。两种解决方式

window.onload = function(里面写js代码)title标签内部
js写在html文档最下方

4|0节点操作

1.创建节点，2.添加自定义属性，3.添加固有属性，4.添加到DOM树中浏览器展示

// appendChild 直接尾部添加

// 创建标签
var imgEle = document.createElement('img');
// 设置自定义属性
imgEle.setAttribute('id','i1')
// 设置固有的属性
imgEle.src = 'longzhu.png'
// 添加到DOM树中，让浏览器展示出来
var d1Ele = document.getElementById('d1')
d1Ele.appendChild(imgEle)

1.创建节点，2.添加固有属性和标签文本值，3.指定位置添加标签

<span>div上面的span</span>
<div>div
    <p>div里面的第一个p</p>
    <span id="s1">
        div里面的span
    </span>
    <p>div里面的第二个p
        <span>div里面的p里面的span</span>
    </p>

</div>
<span>div的邻居</span>

// insertBefore 固定位置添加

// 创建标签
var aEle = document.createElement("a")
aEle.href = 'https:www.baidu.com'
aEle.innerText = '点我点我'
// 获取参考点标签
var spanEle = document.getElementById('s1');
var divEle = document.getElementsByTagName('div')[0];
// 在d3标签内部，s1标签上方添加创建的a标签
divEle.insertBefore(spanEle,aEle)

innerText和innerHTML的区别

// 获取一个标签
var d2Ele = document.getElementById('d2');
// 仅仅能获取到d2标签的内部文本
d2Ele.innerText
// 不仅获取文本，标签页全部获取到
d2Ele.innerHTML

// 获取标签
var d2Ele = document.getElementById('d2');
// 设置内部文本
d2Ele.innerText = '哈哈'
d2Ele.innerHTML = '呵呵'
// 设置内部文本(文本中包含标签)
d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签
d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签

1.获取用户输入的操作

<input type="text">
<textarea name="" id="t1" cols="30" rows="10"></textarea>

var inputEle = document.getElementsByTagName('input')[0]
inputEle.value // 获取到用户输入的值 并且得到用户输入值
inputEle.value = 'hello world'  // 给input框赋值

class操作

<style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 3px solid black;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
<div class="c1 bg_red bg_green"></div>

// 注意点：通过class获取到的数据是一个数组，需要通过索引拿到单个对象

// 根据class找到相应的标签对象
var cEle = document.getElementsByClassName('c1')[0]
// 获取该标签对象的class属性列表并移除背景绿色
cEle.classList.remove('bg_green')

// 添加属性
cEle.classList.add('bg-green')
// 添加属性
cEle.classList.add('bg-green')
cEle.classList.contains('bg-red')
// 有则删除，无则添加
cEle.classList.toggle('bg-green')

style样式操作

  // 修改高度样式
  d1Ele.style.height = '200px'
  // 修改宽度样式
  d1Ele.style.width = '200px'
  // 修改背景色样式
  d1Ele.style.backgroundColor = 'blue'

5|0事件绑定

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。         
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

两种绑定事件的方法

标签内直接调用相应事件函数
js代码自动查找标签并绑定事件

(onfocus,onblur)用户输入获取焦点示例

<input type="text" name="" id="inp" value="点击我获取焦点">
<script>
    let inpEle = document.getElementById('inp');
    inpEle.onfocus = function () {  //onfocus 在输入框中获取焦点
        inpEle.value = ''
    };
    inpEle.onblur = function() {
        inpEle.value = '点击我获取焦点'
    }
</script>

(onclick)点击事件案例

<input type="text" name="" id="inp" >
<button id="btn1">开始</button>
<button id="btn2">结束</button>
<script>
    // 定义一个存储定时器的全局变量
    var flag;
    // 先获取代码中需要用到的一些固定标签对象
    var inpEle = document.getElementById('inp');
    var btn1Ele = document.getElementById('btn1');
    var btn2Ele = document.getElementById('btn2');
    // 定义一个展示时间的函数
    var  showTime = function () {
        // 获取当前时间
        var time1= new Date();
        inpEle.value = time1.toLocaleString()
    };
    // 给b1标签绑定点击事件
    btn1Ele.onclick = function () {
         // 先判断flag是否已经指代了一个定时器
        if (!flag){
            flag = setInterval(showTime,1000)
        }

    };
    btn2Ele.onclick = function () {
        // 取消定时器
        clearInterval(flag);
        // 将标志位手动置为布尔值为false的值即可
        flag = null;


    }
</script>

onchange(事件)实现省市联动:

<select name="" id="s1"></select>
<select name="" id="s2"></select>

<script>
    // 先获取需要操作的标签对象
    var s1Ele = document.getElementById('s1');
    var s2Ele = document.getElementById('s2');
    var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    // 将所有的省渲染到proEle标签内部  for循环获取所有的省
    for (let pro in data){
        // 创建option标签
        let opEle = document.createElement('option');
        // 给option标签设置文本值
        opEle.innerText = pro;
        // 将生成的option标签添加到proEle中
        s1Ele.appendChild(opEle)
    }
    s1Ele.onchange = function () {
        // 先清空cityEle标签内所有的内容
        s2Ele.innerHTML = '';
        // 获取用户选择的省 根据省拿到对应的市
        let choicePro= s1Ele.value;
        let cityList = data[choicePro];
        // for循环创建option标签添加到cityEle标签内
        for (let i =0;i<cityList.length;i++){
            // 创建option标签并添加文本
            let cEle = document.createElement('option');
            // 给option标签设置文本值
            cEle.innerText = cityList[i];
            // 将生成的option标签添加到proEle中
            s2Ele.appendChild(cEle)
        }
        
    }
</script>

6|0window.onload

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。

注意：.onload()函数存在覆盖现象。

__EOF__

作　　者：Zack
出　　处：https://www.cnblogs.com/ZKPython/articles/10970419.html
关于博主：编程路上的小学生，热爱技术，喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！