JavaScript DOM操作 绝地灬酷狼 2022-05-19 12:52 264阅读 0赞 ## 一、节点操作 ## 1、create方法 \- document.CreateElement() 创建元素节点 \- document.CreateTextNode() 创建文本节点 \- document.CreateDocumentFragment() 创建文档片段 \- document.CreateComment() 创建注释节点 2、高效创建节点 innerHTML * innerHTML 用来设置或获取当前标签的起始和结束里面的内容 * 插入一段字符串 “A”+“B”+“C” * 会有一些限制 * 字符串的最左边不能出现空白,IE6-8 会自动移除掉它 * 大多数浏览器不会对 script 标签进行脚本执行操作 * 不能单独创建 meta, style, link 等元素,一定要在前面加上一些字符(有作用域元素) outerHTML * 返回调用它的元素及所有子节点的HTML标签 * 包含节点本身 innerText * 设置或获取位于对象起始和结束标签内的文本 * 写入是纯文本不支持HTML标签 3、节点遍历 ![20180725135904.png][] \- documentElement 属性可返回文档的根节点 \- tagName 属性返回元素的标签名 ![20180725141239.png][] * ownerDocument 返回祖先节点 * hasChildNodes() 判断是否有相应的子节点 解决遍历空白节点 \- 加一段条件语句ele.childNodes\[i\].nodeType == 1 ![20180725142806.png][] len = ele.childElementCount //节点数 ele.chilren[i] //遍历 4、NodeList对象 * NodeList 是一种类数组对象,用于保存一组有序的节点 * 可以通过方括号语法来访问 NodeList 的值,有 item 方法与 length属性 * 它并不是 Array 的实例,没有数组对象的方法 //将nodelist对象遍历,填充到一个数组 arr.push(nodeList[i]); return arr; //调用array下面的slice方法将其转为数组对象 Array.prototype.slice.call(nodeList) 5、HTMLCollection类数组对象 * Ele.getElementsByTagName () * document.Scripts/Links/images/Forms * tr.Cells * select.Options 6、类数组对象的动态性 * Nodelist, HTMLCollection, NamedNodeMap 三个集合都是动态的,是有生命、有呼吸的对 * 它们实际上是基于 DOM 结构动态执行查询的结果,因此 DOM 结构的变化能够自动反映这些对象中 * 每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的信息 ## 二、节点查找 ## 1、getElementById () 返回一个指定id的对象 2、getElementsByName () 返回一个指定name的对象的集合 3、getElementsByTagName () * 返回一个指定tagname的对象的集合,不区分大小写 * \* 所有标签 !注释 4、getElementsByClassName () * 可以传入两个类名(类名不区分前后顺序) 5、querySelector() querySelectorAll () * 可以通过document调用也可以用其他节点对象调用 * 传入选择器字符串 (\#id .classs 逗号分隔多个选择器) ## 三、节点添加 ## 1、appendChild () * 为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。 2、insertBefore () * 在指定的已有子节点之前插入新的子节点 * insertBefore (newitem,参照节点) * insertBefore (newitem,null) 在末尾添加节点 3、replaceChild () * 该方法用新节点替换某个子节点 * replaceChild(要插入的节点,被替换的节点) * 插入节点占据被替换节点的位置 4、cloneNode () * 创建节点的拷贝,并返回该副本。 * 拷贝的节点要有父节点,如果没有父节点,要通过appendChild()、InsertBefore()、replaceChild()等方法对其进行添加 5、normalize () * 合并相邻的text节点 * div.normalize () * .nodeValue 获取合并后的文本内容 6、splitText () * 按照指定的位置把文本节点分割为两个节点 * 传入参数是分割开始的位置的值(数字) ## 四、节点删除 ## 1、removeChild () * 删除某个节点中指定的子节点 * 返回删除的节点 * 必须要传参,删除所有需要遍历 * removeChild(childNodees\[1\]) 2、removeNode () * IE的私有实现 * 将目标节点从文档中删除,返回目标节点 * 参数是布尔值,默认值是 false 仅删除目标节点保留子节点 * true 和 removeChild ()一样效果 [20180725135904.png]: /images/20220519/79a80ab5a40d483db68f040e55beb8f5.png [20180725141239.png]: /images/20220519/885e38bd1a2d4a8490628fc47477f82f.png [20180725142806.png]: /images/20220519/472fee1535e64f5bbea76d7901f7a80f.png
还没有评论,来说两句吧...