HTML dom

puppycuty

于 2018-08-09 23:19:35 发布

阅读量115

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_38125626/article/details/81545479

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

选择器：

document.getElementById('id')
document.getElementsByName('name')
document.getElementsByTagName('tagname')

常用函数：

创建标签，document.createElement('a')
获取或者修改样式
obj.className
获取或设置属性
setattribute(key,val) getattribute(key)
获取或修改样式中的属性
obj.style.属性
提交表单
document.geElementById(‘form’).submit()

常用事件：

onclick
onblur
onfocus
on...
onload和ready

    body标签添加onload事件或者 window.onload = function(){}

        覆盖上一个onload只能注册一次，而ready就可以多次注册

    $(document).ready(function(){}) 或者 $(function(){})

onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

<!DOCTYPE html>
<hr lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
</head>

    <div id="t1">asdf</div>
    <hr>
    <div name="name1">12<p>asd</p><a>qwe</a></div>
    </hr>
    <hr>
    <div name="name1">12<p>asd</p><a>qwe</a></div>
    </hr>


    <!--method 1 -->
    <script src="js/oldboy.js"></script>
    <!-- method 2 -->
    <script type="text/javascript">
        alert('alex');
        /*修改标签文本内容自动过滤标签*/
        var ID1 = document.getElementById('t1');
//        console.log(ID1.innerText);
//        ID1.innerText = "helllo";

        //获取文本内容和标签 有区别
        console.log(ID1.innerHTML);
        ID1.innerHTML="hello";
    var Name = document.getElementsByName('name1');
    Name[0].innerText='aa';
    Name[1].innerText='bb';
    for(var item in Name){
        Name[item].innerText='ss';
    }
    </script>


</body>
</html>

DOM使用实例：

<!DOCTYPE html>
<hr lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        .show{

        }
        .hide{
            display: none;
        }


    </style>
</head>

    <div id="id1" class="show" name="hello">asdf</div>
    <div id="id2" style="border: dotted;width: 500px;height: 100px;color: green"></div>
    <!--
    提交
    <form action="https://www.sogo.com/web?" method="GET">
       <input type="text" name="query" />
        <input type="submit" value="tijiao"/>
    </form>
    -->
    <!-- 伪提交-->
    <form id="F1" action="https://www.sogo.com/web?" method="GET">
       <input type="text" name="query" />
        <input type="button" value="tijiao" onclick="Foo();"/>
    </form>


    <!--method 1 -->
    <script src="js/oldboy.js"></script>
    <!-- method 2 -->
    <script type="text/javascript">
//        //创建标签
//        var tag = document.createElement('a');
//        tag.href="www.baudu.com";
//        tag.innerText="click me";
//        //添加标签
//        var ID1 = document.getElementById('id1');
//        ID1.appendChild(tag);
//
//        //alias
//        var tag1 = "<a href='www.baidu.com'>Clickme</a>>";
//        var ID1 = document.getElementById('id1');
//        ID1.appendChild(tag);

        //修改
        //var ID1 = document.getElementById('id1');
        //ID1.className = "hide";

        //修改属性
        //var ID1 = document.getElementById('id1');
        //console.log(ID1.getAttribute(name)) ;
        //ID1.setAttribute(name,"yes")

        //var ID2 = document.getElementById('id2');
        //console.log(ID2.style.color);
        //ID2.style.color = "red";

        //伪提交
        function Foo(){
          document.getElementById('F1').submit();
        }

    </script>


</body>
</html>

其他函数：

console.log()
location.href = "url" 和 open('url')
alert()
confirm()
setInterval("alert()",2000); clearInterval(obj)
setTimeout(); clearTimeout(obj)

标题走马灯显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>    
    </body>
</html>

搜索框：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        
        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
        <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='请输入关键字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==0||id.value.trim()==''){
                    id.value = '请输入关键字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
    </body>
</html>