js扩展

关于函数

函数是可重复执行的包含特定功能的代码段。

js中的命名函数和匿名函数

<button id="btn1" onclick="func()">点击我吧</button>
<button id="btn2">点击它吧</button>    

<script>
    //命名函数
    function func(){
        //代码段
        alert('点击我吧');
    }
    
    //匿名函数
    var btn2 = document.getelementbyid('btn2');
    btn2.onclick = function(){
        //代码段
        alert('点击它吧');
    }
</script>

关于dom

dom：document object model，称为文档对象模型，在网页加载时，可以将结构化文档在内存中转换为对象结构树。简单的说，dom并不是一种技术，而是一种访问结构化文档的一种思想。借用dom模型，我们可以对dom树进行修改、删除、新增等操作，让结构化文档动态化。
dom模型中的节点--文档可以说是由节点构成的集合。在dom模型中有以下3种节点：

• 元素节点：各种标签就是这些元素节点的名称，如<p>、<ul>等
• 属性节点：一般用来修饰元素节点就称为属性节点
• 文本节点：文本节点总是被包含在元素节点的内部

注：为了动态地修改html元素，须先访问html元素。

查找html元素

document.getelementbyid()            //id   
document.getelementsbyclassname()    //class
document.getelementsbyname()         //name
document.getelementsbytagname()      //tagname

对元素节点的操作：

//创建节点
document.createelement(tag);    //tag必须是合法的html元素

//复制节点
document.clonenode(boolean deep);    //deep为true，复制所有后带节点，为false，只复制当前节点

//添加节点
node.appendchild(newnode)
node.insertbefore(newnode, refnode)

//修改
node.replacechild(newnode, oldnode)

//删除
node.removechild(oldnode)

对属性节点的操作：

//添加
node.setattribute('属性名', '值');

//删除
node.removeattribute('属性名');

//修改
node.setattribute('属性名', '值');

//查询
node.getattribute('属性名')

对文本节点的操作：

//添加、删除、修改、查询
node.innerhtml = '';

注：通过dom还可以修改html标签节点的样式：
document.getelementbyid(id).style.property = new style