前端基础之JavaScript重点之DOM&BOM

Posted 2020-10-10

重点来了 : BOM对象

window对象 :

所有浏览器都支持window对象.
概念上讲 : 一个html文档对应一个window对象.
功能上讲 : 控制浏览器窗口的.
使用上讲 : window对象不需要闯将对象,直接使用即可.

---

window对象方法 :
    > window.alter :     只做提醒用
    > window.confirm :     会返回一个框 布尔值    true或者false
    > window.prompt :      会返回你输入的值.

    >open() : 打开一个新的浏览器窗口或查找一个已命名的窗口.
    >close() : 关闭浏览器窗口.

    >setInterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式.
    >clearInterval() : 取消由setInterval设置的timeout.
    >setTimeout() : 在指定的毫秒数后调用函数或计算表达式.
    >clearTimeout() : 取消由setTimeout设置的timeout.
    >scrollTo() : 把内容滚动到指定的坐标.

---

******DOM (JS中最核心的东西)

DOM : 定义了访问(查找)和操作html文档的标准方法.

DOM??树的目的在于标签导航.

HTML的每一个标签都是一个节点对象(Node)

document 和 element 都是节点.

节点 : 
    1. 在节点数中,顶端节点被称为根(root).
    2. 每个节点都有父节点,除了根.
    3. 一个节点可以拥有任意数量的子
    4. 同胞是拥有相同父节点的节点

***节点操作

####节点查找

//直接定位
var document.getElementById("idname")("d1"); //标签对象
ele.getElementByClassName("name")("c1");  //数组对象,哪怕只要一个,它也是数组.
document.getElementsByTagName("tagname")("p")  //标签名
ele.getElementsByName("name"); //就比如有些input里面会定义一个name = "" )



导航查找 :    通过某个标签定位某些标签

previous : 上一个
next : 下一个
sibling : 兄弟姐妹

parentElement  //父节点标签元素
children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素


####节点操作
1 创建节点 : document.createElement("标签名字")
2 添加节点 : ele_parent.appentChild(ele_child)
    如果是img标签的话,用height和width后面直接加数字,不需要写 引号和px
3 删除节点 : ele_parent.removeChild(ele_child)
4 替换节点 : ele_parent.replaceChild(ele_child)
5. 节点属性操作
    1.获取文本节点的值 : innerText innerHTML
    2.attribute操作 :
            elementNode.setAttribute(name,value)
            elementNode.getAttribute(属性名)
            elementNode.removeAttribute("属性名");

    3.value获取当前选中的value值
        1. input
        2. select (selectedIndex)
        3. textarea
    4.innerHTML给节点添加HTML代码 : 
        该方法不是w3c的标准,但是主流浏览器支持.
        tag.innerHTML = "<p>要显示的内容</p>";
    5.关于class的操作
        1.elementNode.className
        2.elementNode.classList.add : 添加
        3.elementNode.classlist.remove : 删除

    6.改变css样式
        <p id="p1">hello world</p>
        document.getElementById("p1").style.color="white";
        document.getElementById("p1").style.fontSize=36px;

---

DOM Event(事件)

事件类型 :

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

    onfocus : 元素获得焦点.--用于输入框
    onblur : 元素失去焦点.--应用场景 : 用于表单验证,当用户离开某个输入框时,代表已经输入完了.
    onchange : 域的内容被改变.--应用场景 : 通常用于表单元素,当元素内容被改变时触发.(多级联动.)

    onkeydown : 某个键盘按键被按下.--应用场景 : 当用户在最后一个输入框按下回车键时,表单提交.
    onkeypress : 某个键盘按键被按下并松开.
    onkeyup : 某个键盘按键被松开.

    onload : 一张页面或者一幅图像完成加载.

    onmousedown : 鼠标按钮被按下.
    onmousemove : 鼠标被移动.
    onmouseout : 鼠标从某元素移开.
    onmouseover : 鼠标移动到某个元素之上.
    onmouseleave : 鼠标从某个元素离开.

    onselect : 文本被选中.
    onsubmit : 确认按钮被击中. 

---

节点属性 : 
    <div class="c1">div</div>
    1. 文本属性 :

        var ele=document.getElementsByClassName(‘c1‘)[0];

        //赋值操作
        ele.innerText=‘egon‘

        ele.innerHTML=‘egon‘

        //取值操作
        console.log(ele.innerText);

        console.log(ele.innerHTML);  #既可以处理纯文本,也可以处理标签.

    ***
    2. class属性 : ????????????????
        console.log(c1.className)   //当前标签的名字,不常用
        c1.classList.add(‘c2‘);   //把c2的属性也拿过来用了
        c1.classList.remove(‘c2‘); //把c2的属性给remove掉了

    ***

---

事件介绍 :

1. onload

   onload属性开发中,只给body元素加,这个属性的触发标志着页面内容被加载完成. ---应用场景 : 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

2. onsubmit

   当表单在提交时触发,该属性只能给form元素使用. ---引用场景 : 在表单提交前验证用户输入是否正确,如果验证失败,则在该方法中阻止表单的提交.

3. 事件传播 : 

4. onselect : 

5. onchange : 多级联动

6. onkeydown : 

   Event对象 : Event对象代表事件的状态,比如事件在其中发生的元素,键盘按键的状态,鼠标的位置,鼠标按钮的状态.

   事件通常与函数结合使用,函数不会在事件发生前被执行!Event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想指定哪个键被按下了,需要问下Event对象的属性,这里就是KeyCode.

7. onmouseout与onmouseleave事件的区别.