一文详解Javascript DOM树结构

DOM(Document Object Model)即文档对象模型。通过DOM树这样一种结构,不​仅可以直观的看到HTML的整体结构,还可以利用DOM树的一些属性获取到某个元素的子节点和节点名称等信息。,HTML文档结构:,一文详解Javascript DOM树结构,树形结构:,一文详解Javascript DOM树结构,childNodes属性:获取当前节点的子节点。,一文详解Javascript DOM树结构,一文详解Javascript DOM树结构,空格和换行也属于一个节点,用text表示。,一文详解Javascript DOM树结构,获取1、3、5……奇数节点。,nodeName属性:返回节点名称。,一文详解Javascript DOM树结构,appendChild(node):在子节点最后一位插入新节点,node为新节点的名称。,一文详解Javascript DOM树结构,removeChild(node):删除指定父级元素的某个子节点。,项目目标:点击删除按钮,依次删除列表中书籍。,一文详解Javascript DOM树结构,parentNode属性:返回指定节点的父节点。,一文详解Javascript DOM树结构,项目目标:点击叉号删除内容。,一文详解Javascript DOM树结构,replaceChild(newnode,oldnode)方法:用新节点替换之前的节点。,一文详解Javascript DOM树结构,insertBefore可以在已有的子节点前插入一个新的子节点。项目目标:点击按钮,在ul标记子节点的第一位插入包含内容“我的世界”,文字颜色为红色的h4节点。,一文详解Javascript DOM树结构,setAttribute属性:添加指定的属性,并为其赋指定的值。,项目目标:点击“变”按钮,将输入框变为按钮。,一文详解Javascript DOM树结构

文章版权声明

 1 原创文章作者:cmcc,如若转载,请注明出处: https://www.52hwl.com/21824.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年3月5日 上午12:00
下一篇 2023年3月7日 下午10:34