Javascript DOM 编程艺术--笔记1

最新推荐文章于 2022-05-15 23:47:28 发布

LeapMotion1

最新推荐文章于 2022-05-15 23:47:28 发布

阅读量401

点赞数

分类专栏： Javascript 文章标签： javascript 读书笔记

本文链接：https://blog.csdn.net/LeapMotion1/article/details/74962578

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.Javascript语法

JS是一种解释性语言，浏览器中的JavaScript解释器将直接读入源码并加以执行。

    //   单行注释
    /*
    *   多行注释
    */
    <!- 单行注释（为避免与HTML的多行注释混淆，在JS中不推荐此类型注释）
    <!- -> HTML多行注释，JS会把'->' 视为注释内容的一部分

变量声明：

 var data = "123";   //data为局部变量
 data = "123";   //data为全局变量

建议在声明变量的同时，声明数据类型。

数据类型：

string: 字符串型；
number: 数值型；
boolean: true 或 false；
null:用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
undefined:当声明的变量还未被初始化时，变量的默认值为undefined。

alert(typeof undefined); //output "undefined"  
alert(typeof null); //output "object"  
//null即是一个不存在的对象的占位符

alert(null == undefined); //output "true"  

alert(null === undefined); //output "false"  
alert(typeof null == typeof undefined); //output "false"  
//注意 "===" 是绝对等于，在变量比较时，推荐"==="或"!=="

数组Array:

var list = Array();
list["name"]=lennon;
list["age"]=23;

推荐使用关联数组，即填充数组时，数组下标用字符串表示，提高数组的可读性。

对象Object

对象Object:包含属性和方法。
内建对象：Javascript自定义对象，如Array();
宿主对象：浏览器提供的对象，如Form\Element\Image等。

2.DOM

DOM即 Document Object Model,一个HTML文档，就是一棵树。
树上的节点分为：属性节点、文本节点、元素节点。
这些节点中的每一个都是一个对象。

getElementById():返回一个元素节点；文档中的每一个节点都对应一个对象。
getElementsByTagName():返回一个对象数组；

修改getElementsByTagName()获取的元素内容时，记得它是一个数组，正确引用为
getElementsByTagName()[0].childNodes

getAttribute():获取元素节点的属性值；
setAttribute():设置元素节点的属性值，可以重置某个属性值，也可以为元素节点新添加属性值；

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
    <style type="text/css">
        body{
            color: #fff;
            background-color: #ccc;
            font-size: 20px;
        }
        p {
            color: blue;
            font-size: 1.2em;
        }
        #purchase {
            background-color: #333;
            color: #ccc;
            padding: 1em;
        }
    </style>
</head>
<body>
    <h1>What to Buy?</h1>
    <p title="list_title">不要忘记买这些东西！</p>
    <p>购物清单列表</p>
    <ul id="purchase">
        <li>衣服 鞋子</li>
        <li>考试必备数据</li>
        <li>考试必备数据</li>
        <li>衣服 鞋子</li>
    </ul>

    <script type="text/javascript">
    window.onload = function(){

        // alert(typeof document.getElementById("purchase"));   //返回ul节点的类型：对象
        var shopping = document.getElementById("purchase"); //获取ul节点
        var items = shopping.getElementsByTagName("*");     //获取ul节点内的所有元素节点
        for(var i=0; i < items.length; i++) {               //ul节点内有4个li节点
            // alert(typeof items[i]);                      //返回ul节点内的li节点类型
        }
        shopping.setAttribute("title","新标题");
        alert(shopping.getAttribute("title"));

        var paras = document.getElementsByTagName("p");     //获取p节点
        for(var i=0; i< paras.length; i++) {
            var title_p = paras[i].getAttribute("title");
            if(title_p) {
                alert(title_p);
            }
        }

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

3.document.write()和innerHTML

document.write()是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改
document.documentElement.innerHTML.

4.常用事件

1.鼠标事件

onclick:鼠标单击
ondbclick:鼠标双击
onblur:失去焦点
onfocus:获得焦点

onmouseover: 鼠标移到某元素之上
onmouseout:鼠标从某元素离开
onmousedown:鼠标按下
onmouseup:鼠标按键被松开

2.键盘事件

onkeydown:键盘某个键被按下
onkeyup:键盘某个键被松开
onkeypress:某个键盘按键被按下并松开

LeapMotion1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript DOM 编程艺术--笔记1

1.Javascript语法 JS是一种解释性语言，浏览器中的JavaScript解释器将直接读入源码并加以执行。 // 单行注释 /* * 多行注释 */ <!- 单行注释（为避免与HTML的多行注释混淆，在JS中不推荐此类型注释） <!- -> HTML多行注释，JS会把'->' 视为注释内容的一部分变量声明：
复制链接

扫一扫