JavaScript - 认识DOM -

最新推荐文章于 2022-11-03 20:55:12 发布

赵羽珩

最新推荐文章于 2022-11-03 20:55:12 发布

阅读量216

点赞数

JavaScript都有那些事件

onscroll 事件在元素滚动条在滚动时触发。
onload 事件会在页面或图像加载完成后立即发生。
onresize 事件会在窗口或框架被调整大小时发生。
onreset 事件会在表单中的重置按钮被点击时发生。

javascritpの逻辑与（&&）和逻辑或（||）

在js中写出如下的答案 ：

var a = 2;

var b = 3;

var andflag = a && b ;

var orflag = a || b;

问andflag 和orflag 分别是什么？

答案应该是 andflag = 3,orflag = 2;

原因是这样的：

在运算过程中，首先js 会将 && 和|| 两边的值转成Boolean 类型，然后再算值，&&运算如果返回true，则取后面的值，如果|| 返回true,则取前面的值，而其中数值转换成boolean 的规则是：

对象、非零整数、非空字符串返回true,

其它为false ;

a && b 的运算就是：因为 a 和 b全是非零整数，所以 a 和 b 也就是true ,而 true && true 返回 true ,则取后面的b ,同理 a 和b 全是非零整数，a 和b 全是true ,则true || true 返回 true ,取|| 前面的值也就是2；

javascritpの两个定时器

在javascritp中，有两个关于定时器的专用函数，分别为：

1.倒计定时器：timename=setTimeout("function();",delaytime);
2.循环定时器：timename=setInterval("function();",delaytime);

倒计时要用循环定时器来写

JavaScript类型转换 (整型—浮点型)

parseInt() 把值转换成整数
parseFloat() 把值转换成浮点数

JavaScript の scrollTop到达指定位置！

利用scrolltop值做运动，用于到达用户指定的位置（如返回顶部把参数target设置为0即可）

JavaScript由三部分组成

js由三部分组成
        1.ECMAscript
        2.DOM   document  object  model  (文档对象模型)
        简单来说：DOM提供了一些API（接口），赋予开发者操作页面的能力
        3.BOM

DOMの常用节点类型

元素节点            　　          Node.ELEMENT_NODE(1)
文档节点            　           Node.DOCUMENT_NODE(9)
文本节点     纯文本   空格...         Node.TEXT_NODE(3)
注释节点            　            Node.COMMENT_NODE(8)
属性节点            　　          Node.ATTRIBUTE_NODE(2)

DOMの小案例 childNodes/children. 所有子节点集合

不过平时多用 children
在这children 有5个元素节点
而childNodes 有 11个节点 = 6个文本 + 5个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style media="screen">
        li {
            width: 20px;  height: 10px; margin: 10px;
            background-color: red;
            transition: 1s; list-style: none;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script type="text/javascript">
        var oUl = document.getElementById('ul');
        var aLi = oUl.childNodes   //子节点集合  这里有6个文本节点（就是空格啦） + 5个元素节点  = 11个
        document.onclick = function () {
            for (var i = 0; i < aLi.length; i++) {   //  11个
                if (aLi[i].nodeType === 1) {   // 数字为 1 の元素节点有 5个
                    aLi[i].style.cssText = 'width:150px';
                }
            }
        }
    </script>
</body>
</html>

javascript部分の另一种写法

    <script type="text/javascript">
        var oUl = document.getElementById('ul');
        var aLi = oUl.children   // ulの5个li  也就是元素节点
        document.onclick = function () {
            for (var i = 0; i < aLi.length; i++) {   //  5个
                    aLi[i].style.cssText = 'width:150px';
            }
        }
    </script>

DOMの小案例 parentNode. 查找某个元素父节点

操作某元素の父节点、就用 parentNode

例题：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ul>
        <li><a href="javascript:void(0);">点击即隐藏11</a></li>
        <li><a href="javascript:void(0);">点击即隐藏22</a></li>
    </ul>
    <script type="text/javascript">
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                this.parentNode.style.display = 'none';
            }
        }
    </script>
</body>
</html>

DOMの小案例 nextElementSibling. 找到某个元素的下个兄弟节点

DOMの小案例 previousElementSibling. //找到某个元素的上个兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style media="screen">
        li {
            list-style: none;
            margin: 5px;
        }
    </style>
</head>
<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script type="text/javascript">
        var aLi = document.getElementsByTagName('li');
        //找到某个元素的下个兄弟节点
        aLi[1].nextElementSibling.style.cssText = 'background:red;'
        //找到某个元素的上个兄弟节点
        aLi[1].previousElementSibling.style.cssText = 'background:blue;'
    </script>
</body>
</html>

DOMの节点小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style media="screen">
        ul {
            width: 200px;
        }
        ul li {
            color: #666;
            background-color: #eee;
            font-weight: bold;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
            list-style: none;
        }
        ul .focus {            /* 鼠标移入的样式 */
            font-size: 22px;
            background-color: #555;
            color: #fff;
        }
        ul .near {              /* 上下兄弟 的样式 */
            font-size: 18px;
            background-color: #ccc;
            color: blue;
        }
        ul .none {       /* 首位行的样式 */
            background-color: #333;
            color: #fff;
        }
        ul .side {           /* 鼠标移入 首位行的样式 */
            background-color: orange;
        }
    </style>
</head>
<body>
    <ul id="ul1">
        <li class="none">这是首行</li>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
        <li>66666</li>
        <li>55555</li>
        <li>44444</li>
        <li>33333</li>
        <li>22222</li>
        <li>11111</li>
        <li class="none">这是末行</li>
    </ul>
    <script type="text/javascript">
        var oUl = document.getElementById('ul1');
        var aLi = oUl.children;
        var first = oUl.firstElementChild;
        var last = oUl.lastElementChild;

        for (var i = 0; i < aLi.length; i++) {
            aLi[i].onmouseover = function () {

                if (this == first || this == last) {
                    this.className = 'side';
                }else {
                    this.className = 'focus';
                    this.nextElementSibling.className = 'near';
                    this.previousElementSibling.className = 'near';
                    first.className = 'none';
                    last.className = 'none';
                }
            }
            aLi[i].onmouseout = function () {
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = ''
                }
                first.className = 'none';
                last.className = 'none';
            }

        }
    </script>
</body>
</html>

赵羽珩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - 认识DOM -

JavaScript都有那些事件onscroll 事件在元素滚动条在滚动时触发。onload 事件会在页面或图像加载完成后立即发生。onresize 事件会在窗口或框架被调整大小时发生。onreset 事件会在表单中的重置按钮被点击时发生。javascritpの逻辑与（&&）和逻辑或（||）在js中写出如下的答案：var a = 2;var b = 3;
复制链接

扫一扫