《JavaScript与jQuery网页前端开发与设计-第2版》课件汇总 周文洁 第1--7章 绪论、 JavaScript入门 --- jQuery选择器与过滤器.ppt

5.1.5DOM节点1.添加HTML元素【例5-7】JavaScriptDOM添加HTML元素5.1.5DOM节点2.删除HTML元素删除已存在的HTML元素也需要两个步骤：首先使用document对象的getElementById(id名称)方法获取该元素，然后使用removeChild()方法将其从父元素中删除。其父元素如果有明确的id名称，同样可以使用getElementById()方法获取。例如，在知道父元素id名称的情况下删除其中id=p01的子元素：vartest=document.getElementById(test);//获取父元素varp=document.getElementById(p01);//获取子元素test.removeChild(p);//删除子元素5.1.5DOM节点2.删除HTML元素若父元素无对应的id名称获取，可以使用子元素的parentNode属性获取其父元素对象，效果相同。例如，在不知道父元素id名称的情况下删除其中id=p01的子元素：varp=document.getElementById(p01);//获取子元素vartest=p.parentNode;//获取父元素test.removeChild(p);//删除子元素5.1.5DOM节点2.删除HTML元素【例5-8】JavaScriptDOM删除HTML元素5.2浏览器对象模型BOM浏览器对象模型（BrowserObjectModel，BOM）使JavaScript可以与浏览器进行交互。5.2浏览器对象模型BOMBOM中的常用对象如下：window：浏览器窗口对象，其成员包括所有的全局变量、函数和对象。screen：屏幕对象，通常用于获取用户可用屏幕的宽和高。location：位置对象，用于获得当前页面的URL地址，还可以把浏览器重定向到新的指定页面。history：历史记录对象，其中包含了浏览器的浏览历史记录。navigator：浏览器对象，通常用于获取用户浏览器的相关信息。5.2.1Window对象在JavaScript中window对象表示浏览器窗口，目前所有浏览器都支持该对象。JavaScript中一切全局变量、函数和对象都自动成为window对象的内容。例如，用于判断变量是否为数字的全局方法isNaN()就是window对象的方法，完整写法为window.isNaN()。通常情况下window前缀可以省略不写。5.2.1Window对象【例5-9】JavaScriptBOMWindow对象的应用5.2.2Screen对象在JavaScript中window.screen对象可用于获取屏幕的可用宽度和高度。该对象在使用时通常可以省略window前缀，简写为screen。5.2.2Screen对象screen对象的常用属性如下：availWidth：表示屏幕的可用宽度，默认单位为像素（px）。availHeight：表示屏幕的可用高度，默认单位为像素（px）。其中avail前缀来源于英文单词available（可用的）。可用宽度或高度指的是去除界面上自带的内容（例如任务栏）后的实际可使用的宽高。5.2.2Screen对象【例5-10】JavaScriptBOMScreen对象的应用5.2.3Location对象在JavaScript中window.location对象可用于获取当前页面的URL或者将浏览器重定向到新的页面。该对象在使用时通常可以省略windows前缀，简写为location。location的href属性可以用于重定向到其他URL地址。例如：location.href(a.html);5.2.3Location对象【例5-11】JavaScriptBOMLocation对象的应用5.2.4History对象在JavaScript中window.history对象包含了用户通过浏览器窗口访问过的URL历史记录。该对象在使用时通常可以省略windows前缀，简写为history。5.2.4History对象通常使用history对象实现浏览器上返回和前进按钮的相同功能。相关方法解释如下：back()：返回上一个页面，相当于点击了浏览器上的后退按钮。forward()：前进到下一个页面，相当于点击了浏览器上的前进按钮。5.2.4History对象【例5-12】JavaScriptBOMHistory对象的应用Thankyou！JavaScript与jQu