黑马程序员_学习日记18_Dom(2)

时间:2022-08-08 00:26:50

1、 DOM的动态创建

l        document.write只能在页面加载过程中才能动态创建。

l        可以调用documentcreateElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将新创建元素添加到相应的元素下。

function showit(){

       vardivMain=document.getElementById(“divMain”);

       varbtn = document.createELement(“input”);

       btn.type= “button”;

       btn.value= “我是动态的!”;

       divMain.appendChild(btn);

}

<div id=”divMain”></div>

<input type=”button” value=”ok” onclick=”showit()”/>

2、 innerTextinnerHTML

l      几乎所有DOM元素都有innerTextinnerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。

<a href=”” id=”link1” ><font color=”Red”></font>播客</a>

<input type=”button” value=”inner”

onclick=”alert(document.getElementById(‘link1’).innerText);alert(document.getElementById(‘link1’).innerHTML);” />

动态产生的元素,查看源代码是看不到的。通过DebugBarDom→文档→HTML可以看到。

3、  

l      浏览器兼容性的例子:ie6ie7table.appendChild(“tr”)的支持和IE8不一样,用insertRowinsertCell来代替或者为表格添加tbody,然后向tbody中添加trFireFox不支持InnerText

l      事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅Aonclick事件会被触发,Bonclick也会被触发。触发的顺序是“由内而外”。

l      Dom修改样式:

<!--注意:style.background即background-color,在Dom中“-”代表减号-->

<input type="button" value="change color"onclick="this.style.background='red'"/>

onblur失去焦点发生的事件

onfocus得到焦点发生的事件

l        修改层样式

onmouseover、onmouseout、window.event.X(Y)

l        编程控制层的隐藏与显示

<div id=div1” style=display:none>这里是一些高级选项值</div>

4、  IE中body的事件范围

IE中如果在body上添加onclick、onmousemove等事件响应,空白区域无响应。

5、  document.createElement创建空间元素的两种方法:

function btnClick() {

//            //方法一:

//            var input =document.createElement("input");

//            input.type = "button";

//            input.value = "动态按钮";

//            input.onclick = function () {alert("hello"); };

 

//            document.body.appendChild(input);

 

            //方法二:

            //INVALID_CHARACTER_ERR

            varinput = document.createElement("<inputtype='button' value='动态按钮' onclick='Alert()'/>");

            document.body.appendChild(input);

        }

6、 编程控制层

l        float属性:使控件显示在右侧。例:

<imgsrc="images/CloseButton.jpg"style="float:right"/>

l        重新排版的快捷键:Ctrl+E,D

登录超链接的创建:<ahref="javascript:showLogin()">登录</a>

7、 编程操作表单

普通按钮提交表单须调用document.getElementById(‘form1’).submit();

点一个按钮,另一个按钮的onclick事件被触发 document.getElementById(‘btn1’).click()

表单提交之前做数据校验,在onsubmit里写;return false;即可取消提交

有一个select,选择完了以后立即提交

 <select onchange=”document.getElementById(‘form1’).submit()”>

8、 正则表达式:指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。

l        JavaScript中创建正则表达式的方法:

    var regex = new RegExp(\\d{5})或者 var regex = /\d{5}/

/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法,写在//中的正则表达式就不用管转义符了。

l        RegExp对象的方法

(1)   test(str)判断字符串是否匹配正则表达式,相当于IsMatch。例:

var regex =/.+@.+/;

alert(regex.test(“a@b.com”));

alert(regex.test(“ab.com”));

(2)   exec(str)进行搜索匹配,返回值为匹配结果

(3)   compile编译表达式,提高运行速度

l      string的正则表达式方法:string对象中提供了一些与正则表达式相关的方法,相当于对于RegExp类的包装,简化调用。例:

var s = “abc@qq.com”;

var regex = /(.+)@(.+)/;

s.match(regex);

alert(RegExp.$1);//取得第一组

alert(RegExp.$1);

9、回车代替tab

<bodyonkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">

 

 

思考:

为什么不能直接用id.value调用value属性,而要document.getElementById(id).value ?(见注释)

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <scripttype="text/javascript">

        functionbtnClick(){

            vartxt = document.getElementById("textbox1");

            alert(txt.value);

            //alert(textbox1.value);

        }

        functionbtnClick2(){

            vartxt = document.getElementById("textbox2");

            alert(txt.value);

            //这样调用必须记住textbox2的路径,直接调用alert(textbox2.value)则显示textbox2未定义。故一般情况下用document.getElementById方法

            //alert(form1.textbox2.value);

        }

    </script>

</head>

<body>

<inputtype="text" id="textbox1" />

<inputtype="button" value="点一下"onclick="btnClick()"/>

<formaction="Ok.aspx" id="form1">

    <inputtype="text" id="textbox2" />

    <inputtype="button" value="点一下"onclick="btnClick2()"/>

</form>

</body>

</html>

 

javascript中无论方法还是属性,一般开头都小写。