记录使用javascript中的一些坑

最新推荐文章于 2023-02-15 21:44:13 发布

景洪在编程

最新推荐文章于 2023-02-15 21:44:13 发布

阅读量269

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/github_38861674/article/details/77481836

javascript 专栏收录该内容

37 篇文章

订阅专栏

本文详细解析了DOM中childNodes与children属性的区别，并提供了实际应用场景示例，包括如何遍历和删除节点，以及表单提交事件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、element.child和element.childNodes的区别

childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。
children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。

我遇到的坑：

var childNodes = rootEle.children;
      childNodes.forEach(function(item){
        console.log(item);
      })

这段代码会报错：说childNodes.forEach不是一个function，然后查了childNodes的类型：

   typeof childNodes//Object
   childNodes instanceof Array //false

说明childNodes不是一个数组；
但是，通过下标又能够访问；

var childNodes = rootEle.children;
      console.log(childNodes[0]);
      console.log(childNodes[1]);

关于删除节点自身的例子，removeChlid的应用：

parent.removeChild(node);//参数是要删除的节点
删除自身节点：
node.parentNode.removeChild(node);
例如：点击页面上任何一个元素节点，将把它和它的所有子节点删除：

//应用了事件委托
document.body.onclick = function(event){
     event.target.parentNode.removeChild(event.target);
     console.log(event.target);
    }

表单提交时的事件：onsubmit

onsubmit 事件会在表单中的确认按钮被点击时发生。
参考资料：http://www.w3school.com.cn/jsref/event_onsubmit.asp
例子：

<form name="testform" action="jsref_onsubmit.asp"
onsubmit="alert('Hello ' + testform.fname.value +'!')">

What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />

</form>