1.DOM编程初级(原理)0805

最新推荐文章于 2022-10-07 11:02:58 发布

handing2011

最新推荐文章于 2022-10-07 11:02:58 发布

阅读量922

点赞数

分类专栏： 5.JsDOM编程文章标签：编程 javascript function tabs search div

本文链接：https://blog.csdn.net/handing2011/article/details/6664515

版权

5.JsDOM编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM编程

1.instance of 用来判断引用类型，如果遇到值类型，则返回false；typeof-用来判断值类型的对象，如果遇到引用类型，则返回Object

2.块级元素：纵向占一行

3.浏览器加载外部js文件时，会暂时后面代码的运行

优化的小技巧：

把外部js放后面，等整个窗体加载完成后，再调用外部js；

减少外部请求（把图片整合成一个）；

4.关于浏览器编程：浏览器在执行代码；html(毛胚房)、css(装修)、js(动作行为功能)

5．Js也有值类型和应用类型之分

值类型5个:Number、String、Boolean、Undefined ，Null，引用类型:Object

6． <a href="javascript:changeTab(this);">百度</a>

就相当于再html里执行这段代码：<script type="text/javascript">

changeTab(this);

</script>

7．网站中实现切换选项卡的代码：

window.onload = function () {

var ggA = document.getElementById("tabs").getElementsByTagName("a")[0];

changeTab(ggA);

};

function changeTab(obj) {

//获得选项卡 a标签对象们

var tabsDiv = document.getElementById("tabs");

var links = tabsDiv.getElementsByTagName("a"); //此时返回的是一个类似于数组的东东：NodeList，也提供了一个类似于数组的属性length

//获得显示或隐藏的搜索div们

var searchDiv = document.getElementById("search");

var searchDivs = searchDiv.getElementsByTagName("div");

for (i = 0; i < links.length; i++) {

var linkDiv = document.getElementById("links" + i);

if (links[i] == obj) {//如果当前循环到的按钮a，是当前被点击的话

if (searchDivs[i]) searchDivs[i].style.display = "block";//如果div们中存在此对应下标的 div对象，则修改 display 为显示

//links[i].style.backgroundPosition = "0px -32px"; //直接操作了行内样式表，其优先级比style标签中的内嵌样式表优先级高，所以内嵌样式表中一样的属性，会失效。(就近原则)

links[i].className = "selectedTab"; //设置元素的 class 属性(类选择器)

if (linkDiv && linkDiv != undefined) linkDiv.style.display = "block";

} else {

if (searchDivs[i]) searchDivs[i].style.display = "none"; //如果div们中存在此对应下标的 div对象，则修改 display 为隐藏

//links[i].style.backgroundPosition = "0px 0px";

links[i].className = "";

if (linkDiv && linkDiv != undefined) linkDiv.style.display = "none";

}

</script>

</div>

</div>

</div>

名站导航：

<ul>

</ul>

</div>

名站导航2：

<ul>

</ul> </div>

效果图：

切换选项卡：

8. Javascript最终是要操作html页面，让html变成dhtml，而操作html页面就要用到dom。Dom就是把html页面模拟成一个对象，就像XDocument一样，把xml模拟成了一个对象，提供了操作各个节点的方法，直接调用就可以了。

如果javascript只是执行一些计算、循环等操作，而不能操作html也就失去了它存在的意义。

9. 事件

事件：<body οnlοad="" οnmοusedοwn=“alert(‘哈哈’)”>当点击鼠标的时候执行onmousedown中的代码。有的事件响应的代码太多，就放到单独的函数中：

function bodymousedown() {

alert("网页被点坏了，赔吧！");

alert("逗你玩的！");

}

</script>

bodymousedow后的括号不能丢（不能写成： οnmοusedοwn="bodymousedown" ），因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。

可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样

function f1() {

alert("1");

}

function f2(){

alert("2");

}

<input type="button" οnclick="document.οndblclick=f1" value="关联事件1" />//注意f1不要加括号。如果加上括号就变成了执行f1函数，并且将函数的返回值复制给document.ondblclick,这里表示当document.ondblclick时发生f1

window.onload = function(){

//document.getElementById("btnTest").onclick = showName();//若是加上(),就成了调用函数,然后把返回值赋给onclick属性,

document.getElementById("btnTest").onclick = showName;//此时是将showName方法的指针赋给了onclick属性

}

function showName(){

var input = document.getElementById("txtName");

var str = input.value;

alert(str);

}

</script>

</head>

<body>

</body>

handing2011

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.DOM编程初级(原理)0805

DOM编程1.instance of 用来判断引用类型，如果遇到值类型，则返回false；typeof-用来判断值类型的对象，如果遇到引用类型，则返回Object2.块级元素：纵向占一行3.浏览器加载外部js文件时，会暂时后面代码的运行优化的小技巧：把外部js
复制链接

扫一扫