DOM笔录

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_30646505

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量44

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/suke99/p/5445450.html

版权

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：一般说的JS让页面动起来泛指JavaScript和Dom。

1、选择器

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

2、内容

innerText
innerHTML
 
var obj = document.getElementById('nid')
obj.innerText                       # 获取文本内容
obj.innerText = "hello"             # 设置文本内容
obj.innerHTML                       # 获取HTML内容
obj.innerHTML = "<h1>hello</h1>"      # 设置HTML内容
 
 
特殊的：
    input系列
    textarea标签
    select标签
 
    value属性操作用户输入和选择的值

3、创建标签

方式一：
    var obj = document.createElement('a');
    obj.href = "http://www.etiantian.org";
    obj.innerText = "hello DOM";
 
    var container = document.getElementById('container');
    //container.appendChild(obj);
    //container.insertBefore(obj, container.firstChild);
    //container.insertBefore(obj, document.getElementById('hhh'));
 
方式二：
    var container = document.getElementById('container');
    var obj = "<input  type='text' />";
    container.innerHTML = obj;
    // 'beforeBegin', 'afterBegin', 'beforeEnd',  'afterEnd'
    //container.insertAdjacentHTML("beforeEnd",obj);

4、标签属性

var obj = document.getElementById('container');
固定属性
    obj.id
    obj.id = "nid"
    obj.className
    obj.style.fontSize = "88px";
 
自定义属性
    obj.setAttribute(name,value)     // 设置属性
    obj.getAttribute(name)           // 获取属性
    obj.removeAttribute(name)        // 删除属性

5、提交表单

document.geElementById('form').submit();

6、事件

特殊的：

window.onload = function(){}
//jQuery：$(document).ready(function(){})
//onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。　　
//图片还么有渲染，就可以进行事件的执行。

特殊参数：this，event

7、特殊功能

console.log()      // 后台输出显示
alert()               // 页面弹出对话框，显示内容信息
confirm()
 
// URL和刷新
location.href            // 显示URL
location.href = "url"  window.location.reload()    // 刷新页面
 
// 定时器
setInterval("alert()",2000);   // 设置定时器，单位 毫秒
clearInterval(obj);               // 清除    
setTimeout();                     // 设置超时时间
clearTimeout(obj) ;

8、例子

8.1 跑马灯

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>欢迎大王莅临指导  </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>

8.2 搜索框

<!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='请输入关键字' οnfοcus='Enter();'  οnblur='Leave();'/>
    </body>
</html>

转载于:https://www.cnblogs.com/suke99/p/5445450.html

weixin_30646505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM笔录

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。注：一般说的JS让页面动起来泛指JavaScript和Dom。1、选择器...
复制链接

扫一扫