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]

 

 

你可能感兴趣的:(JavaScript)