zoukankan      html  css  js  c++  java
  • javascript学习笔记1

    对象

    用户自定义对象:程序员自行创建的对象;

    内建对象:内建在JS语言中的对象,如Array、Date和Math等;

    宿主对象:由浏览提供的对象。

    window对象对应浏览器窗口本身,这个对象的属性和方法通常称为BOM(浏览器对象模型)。

    节点

    DOM(文档对象模型)比作一棵树,html是树根,代表整个文档。

    元素节点:标签,如<body>、<p>、<ul>等。

    文本节点:标签中的内容,包含在元素节点的内部。

    属性节点:对元素做出更具体的描述,被包含在元素节点中。<a>标签中的title。

    文档中的每个元素都是一个对象。

    获取元素

    getElementById:document.getElementById(‘idName’);

           alert(typeof document.getElementById('test'));    //object

    getElementsByTagName

           alert(typeof document.getElementsByTagName('p'));

    alert(document.getElementsByTagName('*').length);

    getElementsByClassName:可以查找带多个类名的元素,类名不区分顺序。由于这个方法较新,某些DOM里可能不兼容。

    <p class="test">aaaaaaaaaaa</p>

    <p class="test">aaaaaaaaaaa</p>

    <p class="test2">aaaaaaaaaaa</p>

    <p class="test2 aa">aaaaaaaaaaa</p>

    <p class="test2 aa">aaaaaaaaaaa</p>

    <p class="test2 aa bb">aaaaaaaaaaa</p>

    <script>

    alert(document.getElementsByClassName('test2').length);   //4

    alert(document.getElementsByClassName('test2 aa').length);      //3

    alert(document.getElementsByClassName('aa').length);       //3

    </script>

    function getElementsByClassName(node,classname){
        if(node.getElementsByClassName){
            return node.getElementsByClassName(classname);
        }else{
            var result = new Array();
            var elems = node.getElementsByTagName('*');
            for(var i=0; i<elems.length; i++){
                if(elems[i].className.indexOf(classname) != -1){
                    results[results.length] = elems[i];
                }
            }
            return results;
        }
    }

    获取和设置属性

    getAttribute

           object.getAttribute(attribute);

    setAttribute

           object.setAttribute(attribute,value);

    document.getElementById('test').setAttribute('class','classname')

    alert(document.getElementById('test').getAttribute('class'));

    <input type="test" onclick="alert(this.value);" value="test">

    <a href="http://jd.com" onclick="alert(this.href);return false;">test</a>

    事件

    onmounseover:鼠标指针悬停在某元素时触发。

    onmounseout:鼠标指针离开某元素时触发。

    onload:页面加载里执行。

    childNodes:获取元素的所有子元素。返回的数组包含所有类型的节点,文档中几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释成节点。

    var len = document.getElementsByTagName('body')[0].childNodes.length;

    nodeType:节点类型,共有12种。

           node.nodeType

           元素节点的nodeType值是1,属性节点的值为2,文本节点的值为3。

    nodeValue:节点的值。

           node.nodeValue

    firstChild==childNodes[0]

    lastChild==childNodes[node.childNodes.length]

  • 相关阅读:
    AI零基础入门之人工智能开启新时代—下篇
    AI零基础入门之人工智能开启新时代—上篇
    Markdown 快速入门
    Linux GCC/G++ 基础(1) 之
    解决 Ubuntu 下使用 sublime text 3 无法输入中文
    WPF:界面布局之- TaiChi
    常用命令之- touch
    微软net平台是不是快完了?看了一天智联招聘,现在连传统的网站或系统平台都不怎么用net了
    蓝牙Ble开发(支持API18<Android 4.3 Jelly>及以上)
    Android系统休眠对程序的影响以及处理
  • 原文地址:https://www.cnblogs.com/lltong/p/3123044.html
Copyright © 2011-2022 走看看