JavaScript中如何遍历和修改dom实例详解-js教程-PHP中文网

JavaScript中如何遍历和修改dom实例详解

伊谢尔伦

发布： 2017-07-20 13:24:07

原创

2288人浏览过

遍历dom

我们可以写个函数，用来遍历DOM

function walkDOM(n) { 
 do { 
  alert(n); 
  if (n.hasChildNodes()) { 
   walkDOM(n.firstChild) 
  }   
 } while (n = n.nextSibling) 
} 
 
walkDOM(document.body);//测试

登录后复制

修改节点
下面来看看DOM节点的修改。
先获取要改变的节点。

var my = document.getElementById('closer');

登录后复制

非常容易更改这个元素的属性。我们可以更改innerHTML.

my.innerHTML = 'final';//final

登录后复制

因为innerHTML可以写入html，所以我们来修改html。

立即学习“Java免费学习笔记（深入）”；

my.innerHTML = '<em>my</em> final';//<em>my</em> fnal

登录后复制

em标签已经成为dom树的一部分了。我们可以测试一下

AutoGLM沉思

智谱AI推出的具备深度研究和自主执行能力的AI智能体

129

查看详情

my.firstChild;//<em> 
my.firstChild.firstChild;//my

登录后复制

我们也可以通过nodeValue来改变值。

my.firstChild.firstChild.nodeValue = 'your';//your

登录后复制

修改样式
大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码

my.style.border = "1px solid red";

登录后复制

CSS属性很多都有破折号("-")，如padding-top，这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写，规范如下。 margin-left变为marginLeft。依此类推

my.style.fontWeight = 'bold';

登录后复制

我们还可以修改其他的属性，无论这些属性是否被初始化。

my.align = "right"; 
my.name = 'myname'; 
my.id = 'further'; 
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">

登录后复制

以上就是JavaScript中如何遍历和修改dom实例详解的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript移动开发_ReactNative跨平台架构解析 JS注解怎么标注回调函数_ JS回调函数参数的注解方式与示例 JavaScript 实现循环自动滚动与鼠标悬停暂停功能使用 ES6 处理嵌套数组：将 Null 值替换为空字符串 JavaScript路由系统_前端路由原理与实现方案