温习javascript DOM编程

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"    html xmlns="http://www.w3.org/1999/xhtml"   
            var farDIV = document.getElementById("farther"); //根据ID获得DOM的“元素节点”                //元素节点的一些常用的属性                //document.getElementsByTagName("")//根据元素(标签)名称获得DOM的“元素节点”(可能是单个或一组)                //document.getElementsByName("")//根据name属性获得DOM的“元素节点”(可能是单个或一组)                var idNode = farDIV.getAttributeNode("id"); //获得属性为id的“属性节点”                //注意：不要把 getAttribute("id")和getAttributeNode("id")搞混了，前者获取的是属性的值，后者获取的属性节点                var textNode = farDIV.firstChild; //farDIV的第一个子节点                //DOM中常用的属性                //属性（其实只在属性节点中定义才有效）                //farDIV.attributes;//返回该节点的所有属性对象的数组                //节点名称                // alert(root.nodeName + ":" + farDIV.nodeName + ":" + idNode.nodeName + ":" + textNode.nodeName);                //nodeType(不支持IE)有五种，分别代表：标签(元素)节点，属性节点，文本节点，根节点，注释节点                //alert(root.nodeType + ":" + farDIV.nodeType + ":" + idNode.nodeType + ":" + textNode.nodeType);                //节点值                //alert(root.nodeValue + ":" + root.nodeValue + ":" + idNode.value + ":" + textNode.nodeValue);                //根节点的一些常用属性 -- 创建新节点                var newNode = document.createElement("div"); //创建一个div节点   
            var text = document.createTextNode("这是我手动创建的"); //创建一个文本节点                newNode.appendChild(text); //将文本节点插入div节点中                var attrNode = document.createAttribute("id"); //创建属性节点，属性名为“id”                newNode.setAttributeNode(attrNode);   //将newNode节点的属性节点设置为attrNode                newNode.setAttribute("id", "newTest"); //设置newNode节点的id属性设置为newTest                //var comment = document.createComment("我是注释");//创建注释节点                //获取页面中的body标签所在节点                var body = root.lastChild; //获取root的最后一个子节点                body.appendChild(newNode); //将新建的节点插入body中                //如果添加成功，则CSS会生效（字体变红，ID选择器有效）                //获取元素的属性 alert(farDIV.id);   alert(farDIV.getAttribute("id"));                alert(newNode.getAttribute("id")); //HTML中获取节点的属性 -- 在XHTML中的可以简写 ：alert(newNode.id); //                //动态的创建表格                //1.可以使用与上面类似的方式，创建节点、拼接、插入...  但是这样操作似乎很麻烦                //2.可以使用更加简单的操作方式            };         /script   
掌握JavaScript HTML DOM：动态改变CSS样式的实用技巧 随着Web前端技术的不断发展，JavaScript作为一种强大的脚本语言，在前端开发中扮演着重要角色。其中，HTML DOM (文档对象模型)作为JavaScript与HTML之间的桥梁，允许开发者通过JavaScript来改变HTML页面的内容、结构和样式，从而实现丰富的用户交互和动态效果
丁浪 关注高并发、分布式系统架构、中间件、领域建模等。 InfoQ特约作者，CSDN博客专家。