js - 1、DOM操作练习

注意: 

1、好像只有在IE浏览器中才不会计算节点与节点之间的空格
2、document属于window,所以document可以写成window.document,window是可以省略的

知识点: 

1、parentNode: 获取指定节点的父节点

2、previousSibling: 返回某个节点紧跟的前一个节点(要处于同一树层级中)
nextSibling: 返回某个节点紧跟的后一个节点(要处于同一树层级中)

3、firstChild: 访问子节点的第一项
lastChild: 访问子节点的最后项

实现:

1、通过id=divs改变第一个大div的颜色
2、通过id=divs改变第二个大div的颜色
3、通过id=divs改变p标签的背景颜色

代码如下:


<html>
    <head> <meta charset="utf-8" /> <title>DOM案例title> <script type="text/javascript"> function onClicks(){ var divChild = window.document.getElementById("divs"); // 1. 通过id=divs改变第一个大div的颜色 // divChild.parentNode.style.background="yellow"; // 2. 通过id=divs改变第二个大div的颜色(因为这里不会忽略空格,所以需要两次nextSibling) //divChild.parentNode.nextSibling.nextSibling.style.background="yellow"; // 3. 通过id=divs改变 

标签的背景颜色(因为有空格,所以...) divChild.parentNode.firstChild.nextSibling.style.background="blue"; } script> head> <body> <div> <p>段落p> <div id="divs">这是div的内容div> <a>链接a> div> <div> abcdefge div> <input type="button" value="点击操作" onclick="onClicks()"/> body> html>

 

转载于:https://www.cnblogs.com/ibelieveyou/p/7183577.html

你可能感兴趣的:(js - 1、DOM操作练习)