JavaScript中如何遍历和修改dom实例详解
程序员文章站
2022-03-18 09:22:55
...
遍历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。
my.innerHTML = '<em>my</em> final';//<em>my</em> fnal
em标签已经成为dom树的一部分了。我们可以测试一下
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实例详解的详细内容,更多请关注其它相关文章!
上一篇: css实现文本图标对齐的方法
推荐阅读
-
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
-
JavaScript中BOM和DOM详解
-
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
-
javascript如何为对象添加、修改或者删除属性和方法实例详解
-
JavaScript中var声明方式和变量作用域实例详解
-
如何区别javaScript中定义变量有没有var的区别实例详解
-
JavaScript中typeof和instanceof的对比用法实例详解
-
JavaScript中如何实现自定义事件代码实例详解
-
javascript中函数定义以及声明和表达式区别实例详解
-
javascript中的null和undefined用法区别实例详解