JavaScript回顾(5)

来源：互联网发布：轻松筹软件下载编辑：程序博客网时间：2024/06/05 14:18

一、查找

第一种方式：依据id查找
var obj = document.getElementById(id); //document是HTMLDocument的实例
<html>
    <head>
        <script>
            function f1(){
                var obj = document.getElementById('a1'); //双引号，单引号都可以
                //innerHTML属性：可以访问或者设置节点的html的属性值
                //alert(obj.innerHTML);
                obj.innerHTML = "为什么点我"; //双引号单引号都可以
            }
            function f2(){
                var obj = document.getElementById('d1');
                alert(obj.innerHTML);
            }
            function f3(){
                var obj = document.getElementById('username');
                //value属性：可以获取文本输入框的值和改变值
                alert(obj.value); //获得值
                obj.value = 'abc';//改变值
            }

        </script>
    </head>

    <body style="font-size:30px;font-style:italic;">
        
        <a href="javascript:;" id="a1" onclick="f1();">click me</a><br/>
        <div id="d1" ><span>你好</span></div><br/>
        <input type="text" id="username" name="username"/><br/>
        <input type="button" value="点我吧" onclick="f3();"/>
    </body>
</html>
第二种方式
var arr = node.getElementsByTagName('tagName');
<html>
    <head>
        <style>
            ul{
                list-style-type:none;
            }
            ul li{
                float:left;
                border:1px solid black;
                margin-left:10px;
                width:100px;
                height:40px;
                background-color:red;
                cursor:pointer;
            }
            .selected{
                background-color:#ff88ee;
            }
        </style>
        <script src="myjs.js"></script>
        <script>
            function doAction(index){
                var arr = $('u1').getElementsByTagName('li');
                for(i=0; i<arr.length; i++){
                    arr[i].className = '';
                }
                var obj = $('l'+index);
                obj.className = 'selected';
            }
        </script>
    </head>
    <body style="font-size:30px;">
        <ul id="u1">
            <li onmouseover="doAction(1);" id="l1">选项一</li>
            <li onmouseover="doAction(2);" id="l2">选项二</li>
            <li onmouseover="doAction(3);" id="l3">选项三</li>
        </ul>
    </body>
</html>
第三种方式
使用遍历的方式（浏览器兼容性差）

parentNode
previousSibling 前一个兄弟
nextSibling 下一个兄弟
childNodes 所有子节点
firstChild 前一个子节点
lastChild 后一个子节点
遍历的方式因为有浏览器的兼容性问题，尽量少用

二、创建

document.createElement(tagName); //tagName表示标记名

三、添加

node.appendChild(obj); //作为最后一个孩子添加
node.insertBefore(obj, refNode); //添加到refNode的前面

node.replaceChild(obj, refNode); //替换refNode

四、删除

node.removeChild(obj);
<html>
    <head>
        <script>
            function f1(){
                var obj = document.createElement('div');
                obj.innerHTML = '兴趣最重要...';
                obj.className = 's1';
var obj2 = document.getElementById('d1');
var obj3 = document.getElementById('a1');
            //  obj2.appendChild(obj);
            // obj2.insertBefore(obj, $('a1'));
            // obj2.replaceChild(obj, $('a1'));
obj2.removeChild($(obj3);
            }
        </script>
        <style>
            .s1{
                width:200px;
                height:100px;
                background-color:red;
            }
        </style>
    </head>

    <body style="font-size:30px;" id="d1">

        <a id="a1" href="javascript:;" onclick="f1();">如何学好java</a>
    </body>
</html>

五、样式

第一种方式：修改节点的className属性
比如：var obj = document.getElementById('id1'); obj.className = 's1'; //使用s1样式 ****见例子：表单验证****

第二种方式：修改节点的style属性
1.必须是内联样式
2.如果要修改的样式属性名包括"-"，比如background-color,则要按照如下方式修改node.style.backgroundColor = 'red';
<html>
    <head>
        <style>
            #d1{
                width:80px;
                height:80px;
                background-color:blue;
                position:relative;
            }
        </style>
        <script>
            function f1(){
var obj2 = document.getElementById('d1');
                var v1 = parseInt(obj2.style.left);
                obj2.style.left = v1 + 50 + 'px';
            }
        </script>
    </head>
    <body>
        <div id="d1" style="left:10px;"></div>
        <input type="button" value="click me"
        onclick="f1();"/>
    </body>
</html>

如何禁止浏览器的两种默认行为：
点击连接，浏览器会向href属性指向的地址发请求
点击表单提交按钮，浏览器会提交表单
禁止的方式
<a href="" onclick="return false;"></a>
<from onsubmint="return false;"></form>

0 0