码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript Dom 笔记誊录

时间:2015-10-02 18:42:24      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

DOM:文档对象模型
Dhtml:javascript+css+html(dom)
为什么要使用Dom:
1、HTML页面动态化
2、提升用户交互型
2、

1、document.getEelmentById
可以通过对象的id属性来获取该元素对象
2、document.getElementsByTagName
可以通过元素的标签名得到一组元素对象的数组
3、document.getElementsByName
根据元素的name属性来获得该一组对象的数组,一般节点都具有name属性

document.etElementsByTagName("*")获取document下的所有的标签
var elements=document.getElementsByTagName("*");
for(var i=0;i<elements.length;i++)
{
  alert(elements[i]);
}

var 属性值=元素.getAttribute(属性名);//取得属性名
元素.setAttribute(属性名,新值);//设置属性名

this.setAttribute("class","enter");//设置类的样式名称为enter,浏览器的兼容性的问题;
  this.className="enter";//效果同上
  this.className="";//取消样式

  //美图馆中当鼠标移动上去的时候改变下面的图片和文本提示
    

<script type="text/javascript">
            function showPic(link) {
                var url = link.getAttribute("href");//获取属性值
                var txt = link.getAttribute("title");//获取属性的值
                // 获得节点
                var img = document.getElementById("placeholder");
                var p = document.getElementById("description");
                
                img.setAttribute("src", url);//元素节点重新赋值
                p.lastChild.nodeValue = txt;//元素节点重新赋值
            }            
        </script>

<ul>
            <li>
                <a href="./img/1.jpg" title="第一美图果果1" onmouseover="showPic(this);" onclick="showPic(this); return false;">美图果果1</a>
            </li>
         </ul>
onclick="showPic(this); return false;//表示点击的时候不跳转         
var allelements=document.getElementById("myForm").elements;//获取表单中的所有元素的的集合
noteType=1//元素节点
noteType=2//属性节点
noteType=3//文本节点

页面设计的基本原则:
预留退路
分离
向后兼容

window.open("url","标题","设置");


onclick="popUp(www.baidu.com);"
javascript伪协议:
<a href="javascript:popUp(‘
http://www.baidu.com‘);">百度</a>
<a href="#" onclick="">


如果浏览器不认识方法,浏览器就不应该报错,返回
if(!document.getElementByTagName) return false;

<script type="text/javascript" >
 
document.Write("<a href=‘www.badu.com‘>连接</a></br>");
document.write("dwd");可以在页面中创建内容
放在那里就那执行;
 
<element>.innerHTML:可以来获取与修改一个标签的所有内容
对于大面积的HTML也的生成有很大的优势 ,因为直接处理html代码
自我们的规范中不要出现哪些不必要的标签
1、由js生成div
2、由innerhtml写入table

如何生成标签(节点)
1、首先创建一个节点
createElement(标签名);
createTextNode(文本内容");
var div=createElement("div");
设置该节点的属性的值与数据
setAttribute(属性,值);
div.setAttribute("","")
添加该节点到父节点中;
父节点.appendChild(节点);

var div=document.createElement("div");//创建一个元素
      div.setAttribute("id","form");//设置该元素的属性id等于form
      var body=document.getElementsByTagName("body")[0];//获取bod元素,父节点
      body.appendChild(div);//在body上添加该节点


window.onload的事件加方法:
什么时候直接等于
什么时候写匿名方法,当window.onload的事件中要绑定多个方法的时候,一般写匿名方法

window.onload=function()
      {
        createDIV();
        addclick();
      }

调用一个方法进行判断     

function addLoadEvent(func)
{
  var old=window.onload;//存储旧的绑定方法
  if(!window.onload)//等同于if(window.onload==null)
  {//还是执行==null的条件分支,因为前面讲过当null作为if判断时候,都会是假,会去执行else语句
   //前面加个!,其实还是表示null,只是执行的语句是IF当中的。
    window.onload=func;//当 window.onload=为空时,把方法赋给它
  }
  else
  {
  window.onload=function()// window.onload不为空,匿名方法进行添加
  {
    old();//旧的方法
    func();//新的方法
  }
  }
}

    function func1() {
                alert(1);
            }
    function func2() {
                alert(2);
            }
    function func3() {
                alert(3);
            }

//调用的时候:只要传方法名进去
addLoadEvent(func3);
addLoadEvent(func1);

// 第一次调用        func1
            // old    null
            // onload func1
            
            // 第二次调用        func2
            // old    func1
            // onload func1 func2
            
            // 第三次调用        func3
            // old      func1 func2
            // onload func1 func2 func3
            

<dl>
      <dt> 
        <dd>

       
样式的那些事:
只能遍历行内样式
常常用来创建样式
1、根据某些条件来创建 样式
2、根据DOM机构来创建样式
3、根据事件作出响应
伪clas属性
简单原则、兼容原则


时间处理函数:

setTimeout:指定多长时间以后执行一段代码(只执行一次)
setTimeout(js代码段,时间间隔)
setTimeout("alert(我执行了)"5000);
setInterval:指定间隔多长时间执行一段代码:(循环)
setIntervaljs(代码段,时间间隔)

function moveElement(elemId)
   {
     var img=document.getElementById(elemId);
     var x=parseInt(img.style.left);
      var y=parseInt(img.style.top);
      x++;
      y++;
      img.style.left=x+"px";
      img.style.top=y+"px";
     }
setInterval("moveElement(‘image‘)",5000);

让计时器停下来:

setTimeOut在调用的时候会返回一个值
clearIntever(返回的值)
clearTimeOut(返回的值)

让计时器停下来
               

setTimeout在调用的时候,会返回一个值
                clearTimeout(刚才返回的值)
                
                setInterval在调用的时候,也会返回一个值
                clearInterval(刚才返回的值)


正则表达式:

    // 声明 正则表达式的条件用//刮起来
           

/*
            var reg = /^\d{6}$/;//绝对的匹配,与c#中的一样,前后加^$括起来
            // IsMacth    test
            if(reg.test("1234567")) {
                alert("是匹配上了");
            } else {
                alert("没有匹配上");
            }
            */
            // exec来取出匹配出来的字符
            /*
            var reg = /\d+/;
            var res = reg.exec("我19了");//
            alert(res);
            */
            // String提供match方法来提取匹配出来的字符
            var txt = "我19了,你今年17了";
            var res = txt.match(/\d+/);//只提取出来了19
            var res = txt.match(/\d+/g);//后面加个g表示把所有符合条件的都取出来:19/17
            alert(res);

           
可以通过style访问到样式
语法为:
样式的属性名 值
样式的属性名满足骆驼命名法

cssText属性
            等价于
            getAttribute("style");
            setAttribute("style", 。。。);

function setStyleById(id) 
            {
                var elem = document.getElementById(id);
                elem.style.color = "red";
                // 骆驼命名规则(camelCase)
                elem.style.fontFamily = "华文彩云";
                elem.style.fontSize = "50px";
                elem.style.textDecoration = "none";
                // 添加一个边框
                elem.style.border = "1px solid blue";
                
            }

     
一般获取文本节点的值

var p = document.getElementById("interval");
var txt = p.lastChild.nodeValue;

然后可以重新设置它的值

p.lastChild.nodeValue = num + "秒后跳转...";


       

JavaScript Dom 笔记誊录

标签:

原文地址:http://www.cnblogs.com/hetong/p/4852420.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!