js DOM元素获取的方法(8种) |
您所在的位置：网站首页 › 影视作品综合了哪几种元素 › js DOM元素获取的方法(8种) |
| # js DOM元素获取的方法(8种) DOM: Document object model 文档对象模型，描述整个html页面中节点关系的谱图 # document.getElementById('id')通过id获取元素，如果id重复了，获取到的是第一个，区分大小写（在 IE 6,7中不区分） 在 IE 6,7 中会把元素的 name 当作 id 来使用 如果没有获取到则返回 null,可以用id直接代表这个对象，而不去提前获取。上下文只能是 document // html js中可以直接通过id拿到我 // js console.log(test); 1234# context.getElementsByTagName('li')通过元素的标签名获取一组元素，有几个获取几个。可以根据上下文(context)获取我们获取元素的范围。 document.getElementsByTagName('li'); oDIv.getElementsByTagName('li'); 12# document.getElementsByName('text')通过元素的name属性获取一组元素 注意在 IE浏览器下只对表单元素起作用。这个方法常用于获取具有相同name的表单元素 # context.getElementsByClassName('class')在 IE 6~8 会报错 # document.documentElement,document.body分别获取 html,body 元素，通常用来获取文档属性 var winW = document.documentElement.clientWidth || document.body.clientWidth // 兼容所有的浏览器获取当前浏览器宽度 1# document.querySelector,document.querySelectorAll在移动端常用的方法，IE6～8不支持。同时不存在映射关系 前者只获取一个元素，后者获取全部 document.querySelector('#id') document.querySelector('.class') document.querySelector('li') document.querySelectorAll('#id li') // 后代选择器 document.querySelectorAll("input[type='text']") // 属性选择器 12345# DOM 中的节点和关系属性w3chool的文档 # 获取关系的属性节点：node 一个html页面中的元素标签、文本、注释。。。都是节点。在标准浏览器下，空格和Enter（回车）都是文本节点 oBox.childNodes // 获取所有的子节点 oBox.children // 获取所有的元素子节点 oBox.parentNode // 获取元素的父亲节点 oBox.previousSibling // 获取元素位于相同节点树层级的前一个元素，注意空格回车文本节点也会获取。(哥哥) oBox.nextSibling // 获取元素位于相同节点树层级的后一个元素。(弟弟) oBox.firstChild // 获取第一个子元素 oBox.lastChild // 获取元素的最后一个 1234567# 节点主要的节点类型及其属性。 节点类型 nodeType nodeName nodeValue 元素节点（元素标签） 1 大写的标签名 null 文本节点（文字） 3 #text 文字内容 注释节点 8 #comment 注释内容 document 9 #document null # 小案例，模拟children方法模拟children方法，实现获取指定元素下所有的元素子节点 // 1. 获取 children 标签元素 可以设置筛选 function getChildren(ele,tagName) { var ary = []; var nodes = ele.childNodes; // 拿到元素下所有的子节点 for (var i = 0; i 123456789js 代码 // 1.获取上一个兄弟节点，兼容IE var li3 = document.getElementById('li3') function prev(ele) { var pre = ele.previousSibling; while (pre && pre.nodeType !== 1) { pre = pre.previousSibling; } return pre } prev(li3) // 2. 获取上一个兄弟节点，previousElementSibling 标准浏览器 // 3.获取所有的上级兄弟节点 var li3 = document.getElementById('li3') function prevAll(ele) { var ary = []; var pre = ele.previousSibling; while (pre) { if (pre.nodeType === 1) { ary.unshift(pre) } pre = pre.previousSibling; } return ary } prevAll(li3) // 4. 获取当前元素的索引 function index(curEle) { // 有几个哥哥就是几 var ary = []; var pre = curEle.previousElementSibling; while (pre) { ary.unshift(pre) pre = pre.previousElementSibling; } return ary.length } // 5. firstchild 第一个元素节点 function firstChild (parentNode) { return parentNode.children[0] ? parentNode.children[0] : null } 123456789101112131415161718192021222324252627282930313233343536373839404142434445# DOM 增删改 document.createElement('div'); 动态创建一个标签元素 box.appendChild() 将元素添加到指定的容器中的末尾 insertBefore(newItem,existingItem) 把新的元素插入到老得元素之前，如果老元素不存在，会放到末尾 removeChild(item) 删除元素 cloneNode(true || false) 克隆元素默认false只克隆当前元素，true clone 子孙 replaceChild(newnode,oldnode) document.createDocumentFragment() 创建文档碎片属性的增删改查 setAttribute() getAttribute() removeAttribute() 在IE 6~8 中不能修改class属性 box.className可以 // 1. append function append (newEle, container) { container.appendChild(newEle) } // 2. prepend function prepend (newEle, container) { var firstChild = container.children[0] ? parentNode.children[0] : null container.insertBefore(newEle, firstChild) } // 3. insertBefore function insertBefore (newEle, oldEle) { oldEle.parentNode.insertBefore(newEle, oldEle) } // 4. insertAfter function insertAfter (newEle, oldEle) { oldEle.parentNode.insertBefore(newEle, oldEle.nextElementSibling) } 1234567891011121314151617181920# dom 数据绑定方法 // 1. 通过 document.createElement 进行创建插入，会造成多次 dom 回流，即重新渲染 dom，造成性能浪费，不影响原有的 dom document.createElement document.appendChild // 2. 字符串拼接，只需要一次回流，但是会造成原有的 dom 丢失事件绑定 var str = 'aa' box.innerHTML = str // 3. 文档碎片 var frg = document.createDocumentFragment() // 创建一个文档碎片相当于临时创建了一个容器 for (var i = 0; i |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |