js获取元素的方法:
根据id获取:
返回的是一个元素对象
document.getElementById('id');
根据标签名获取:
返回的是 获取过来的元素对象的集合 以伪数组的形式储存的
document.getElementsByTagName('标签名');
var list = document.getElementsByTagName('li');
还可以获取某个元素(父元素)内部所有指定的标签名的子元素
var ul = document.getElementsById('ul');// 必须是指定的单个元素
var list=ul.getElementsByTagName('li');
通过 HTML5 新增的方法获取:
document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合 伪数组
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 返回指定选择器的所有元素对象集合 伪数组
注意:
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:
document.querySelector('#nav');
获取特殊元素(body,html):
doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象
利用节点层级关系获取元素:
//父级节点
node.parentNode // 返回 最近的一个父节点 如果指定的节点没有父节点则返回 null
// 子节点
parentNode.childNodes(标准) // 包含指定节点的子节点的集合(包含文本,元素,空格等),该集合为即时更新的集合。
如果只需要元素节点:
var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {
// ul.childNodes[i] 是元素节点
// nodeType 节点类型 1是元素节点 2是属性节点 3是文本节点(包含文字、空格、换行等)
console.log(ul.childNodes[i]);
}
}
parentNode.children(非标准) // 返回所有的子元素节点 (是一个集合,伪数组)。它只返回子元素节点,其余节点不返
parentNode.firstChild //firstChild 返回第一个子节点,找不到则返回null。(包含文本,元素,空格等)。
parentNode.lastChild //lastChild 返回最后一个子节点,找不到则返回null。(包含文本,元素,空格等)。
以下这两个方法有兼容性问题,IE9 以上才支持:
parentNode.firstElementChild // firstElementChild 返回第一个子元素节点,找不到则返回null
parentNode.lastElementChild // lastElementChild 返回最后一个子元素节点,找不到则返回null。
获取兄弟节点:
node.nextSibling // 返回当前元素的下一个兄弟节点,找不到则返回null。包含文本,元素,空格等
node.previousSibling // 返回当前元素上一个兄弟节点,找不到则返回null。包含文本,元素,空格等
以下两个方法有兼容性问题, IE9 以上才支持:
node.nextElementSibling // 返回当前元素下一个兄弟元素节点,找不到则返回null
node.previousElementSibling // 返回当前元素上一个兄弟元素节点,找不到则返回null。
创建节点(动态创建元素节点 ):
document.createElement('tagName') // tagName 元素名称例如:li,ul,div,a等
添加节点:
node.appendChild(child) // 将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的
after 伪元素。
node.insertBefore(child, 指定元素) // 将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
例如:
var ul = document.querySelector('ul');
var li = document.createElement('li'); // 先创建节点
ul.appendChild(li); // 再添加节点 往后添加
ul.insertBefore(li, ul.children[0]); // 添加节点 往前添加
删除节点:
node.removeChild(child) // 从 DOM 中删除一个子节点,返回删除的节点
复制节点(克隆节点):
node.cloneNode() // 返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
如果括号参数为空或者为 false ,则是 浅拷贝 ,即只克隆复制节点本身,不克隆里面的子节点。
如果括号参数为 true ,则是 深度拷贝,会复制节点本身以及里面所有的子节点。
修改dom的元素属性:
修改元素属性: src、href、title等
dom.src=''
修改普通元素内容: innerHTML 、innerText
两个属性是可读写:
innerText 不识别 html 标签 非标准 会自动去除空格和换行
innerHTML 识别 html 标签 W3C标准 保留空格和换行
修改表单元素: value、type、disabled等
修改元素样式: style、className
className 会直接更改元素的类名,会覆盖原先的类名
var text = document.getElementById('txt');
text.className = 'text';
jQuery基本和层级选择器
$("选择器") // 里面选择器直接写css选择器即可,但要加引号
基础选择器重点使用:id,类名,标签名。
名称 | 用法 | 描述 |
id选择器 | $("#id") | 获取指定id的元素 |
全选选择器 | $("*") | 获取所有元素 |
类选择器 | $(".class") | 获取同一类名的class元素 |
标签选择器 | $("div") | 获取同一类标签的所有元素 |
并集选择器 | $("div,p,ul,li") | 获取多个元素 |
交集选择器 | $(“ul.thisul”) | 获取类名为thisul的ul元素 |
层级选择器中后代和子代
名称 | 用法 | 描述 |
子代选择器 | $("ul>li"); | 获得最近层级子元素,不会获得下下层级元素 |
后代选择器 | $("ul li"); | 使用空格,代表后代选择器,获取ul下的所有元素,包含下下层级元素等 |
vue 获取元素:
<template>
<div>
<div ref="mydiv" @click="clickParent">点击获取元素</div>
</div>
</template>
<script>
export default {
methods: {
clickParent() {
console.log(this.$refs.mydiv);
}
}
}
</script>