原生js操作Dom命令总结
常用的dom方法
document.getElementById(“box”);//通过id获取标签
document.getElementsByTagName(“div”);根据标签名获取页面元素
注意:
由于获取结果可能是多个,element后面要加s
根据标签获取的结果是伪数组形式,伪数组是不具备数组的方法。
要操作伪数组中的所有元素需要遍历伪数组。
根据标签名获取元素时,有可能获取到的标签只有一个,但是形式还是伪数组。
根据标签名获取时,document可以更换为任意标签
在box中获取li标签。
注意: 根据id获取的时候,前面只能写document
1
2
3
4
5
6
7
8
9
10
11
这里写图片描述
- document.getElementsByclassName(“box1”) 根据类名获取页面元素
- window.onload()中的代码会在页面完全加载后执行。
设置标签的样式等方法
对标签的样式设置使用.style
var box=document.getElementById("box");
box.style.width="100px";
box.style.backgroundColor="#ff00000"//带有段横线的属性要是用驼峰命名的方式。
1
2
3
设置标签的内容。
box.innerHtml=”哈哈”;
事件类型
- 点击事件 onclick
- 鼠标移入 onmouseover
- 鼠标移出 onmouseout
类名属性
访问标签的类名属性通过 标签.className
标签默认事件
某些标签具有默认的效果,例如a标签的跳转,有时候我们不想要这种效果,可以在事件最后加上return false;
这里写图片描述
循环添加事件
当我们进行循环添加事件的时候,在事件内部不能使用i,因为i的值已经是循环的结束条件那个值了(根据循环设置的具体情况而定)。
<script>
var box=document.getElementsByClassName("box");
for(var i=0;i<box.length;i++){
box[i].onclick=function () {
alert(this.innerHTML);
}
}
</script>
1
2
3
4
5
6
7
8
焦点事件
onfocus 文本框获取焦点时触发事件
onblur 失去焦点时触发事件
表单的常用属性:
input获取内部文本 使用value ipt.value
表单的属性
(不太常用)禁用表单 ipt.disabled 可以给表单禁用。设置值为true表示禁用,false表示启用
复选框选中 cb.checked 值为true表示选中 值为false表示没选中
下拉菜单选中 doudou.selected 值为true表示选中,为false表示没选中
全选反选的案例
方式一:使用flag(需要掌握)
这里写图片描述
方式二:不使用flag
这里写图片描述
样式相关
样式表有三种方式
内嵌样式(inline Style):是写在Tag里面的,内嵌样式只对所有的Tag有效。
内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表(External
Style
Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。
通过标签.style.width 只能获取行内设置的样式属性,内嵌式和外链式都无法获取。
getComputedStyle(标签,false).width 可以获取计算后的样式(ie不支持)
console.log(getComputedStyle(box,null).height);
console.log(getComputedStyle(box,null)["height"]);
1
2
ie低版本不支持getComputedStyle
标签.currentStyle.height
console.log(box.currentStyle.height);
console.log(box.currentStyle["height"]);
1
2
封装一个兼容的获取样式的方法。
//tag是标签,attr是需要获取的属性。
function getStyle(tag,attr){
if(tag.currentStyle[attr]){//先判断有没有这个属性,没有是undefined,不会报错。
return tag.currentStyle[attr];
}else{
return getComputedStyle(tag,null)[attr];
}
1
2
3
4
5
6
7
同时设置标签的多个样式
box.style.cssText="width:10px;height:100px;background-color:red";//不常用
1
文本的设置:
box.innerHTML 可以获取和设置某个标签内的文本和内部标签
box.innerHTML="中午吃<span>我是sapn的内容</span>"
1
通过box.innerText可以获取不含内部标签的文本,ie支持
其他浏览器支持box.textContent属性,作用与innerText相同
标签的获取方式
document.getElementById(“id名”) 根据id获取
document.getElementsByTagName(“标签名”) 根据标签名获取
document.getElementsByClassName(“类名”) 根据类名获取 ie低版本不支持
封装根据类名获取页面元素的函数(性能不高)
这里写图片描述
节点
dom – 文档对象模型 document是dom中的顶级对象
dom把html页面看作一个树结构
dom树中的每一个部分我们都称为节点。
这里写图片描述
节点访问关系
dom中提供了一套访问关系,称为节点访问关系
父子访问关系:
通过parentNode可以访问某个节点的父节点
通过childNodes可以得到某个节点的所有子节点,包含文本节点(空格和换行)
通过children可以得到某个节点中的所有元素子节点(不是标准方法,但是所有浏览器都支持,可放心使用)。
获取子节点
node.firstChild 表示第一个子节点(包含文本节点)
node.lastChild 最后一个子节点(包含文本节点)
获取元素子节点:ie低版本不支持
node.firstElementChild 第一个元素子节点
node.lastElementChild 最后一个元素子节点
兄弟访问关系:
这里写图片描述
不加element的都支持,加上的ie低版本
添加子节点
从后面添加:节点.appendChild(传入的节点); 添加的新节点其实是移动过来的。
从前面添加:节点.insertBefore(要插入的节点 , 在谁之前); 将节点插入到子节点中指定节点的前面。
注意:一定是父节点去调用方法,操作的都是子节点
这里写图片描述
创建节点的方式
节点.innerHTML
document.write(“
”)
第三种创建方式document.createElement(“标签名”)
document不能更换
var newbox=document.createElement("标签名");
box.appendChild(newbox);
删除节点
父节点.removeChild(子节点)
调用的对象是父节点、
父子访问关系
访问父元素:节点.parentNode
访问子元素:
1、 全部子节点 childNodes 全部子节点 (包含文本节点)
2、 全部元素子节点 children 全部的元素子节点(标签)
总结:
访问某个子节点:
1、 第一个子节点 firstChild (有可能是文本节点)
2、 第一个元素子节点 firstElementChild ie低版本不支持
3、 最后一个子节点 lastChild (有可能是文本节点)
4、 最后一个元素子节点 lastElementChild ie低版本不支持
兄弟访问关系:
1、 前一个兄弟节点 previousSibling (有可能是文本节点)
5、 前一个兄弟元素节点 previousElementSibling ie低版本不支持
6、 后一个兄弟节点 nextSibling (有可能是文本节点)
7、 后一个兄弟元素节点 nextElementSibling ie低版本不支持
onkeyup 键盘上的键抬起来触发事件
克隆节点
节点.cloneNode(参数)
var box=document.getElementById("box");
var newNode=box.cloneNode(true);//如果传入的是true那么就是标签和内容一起复制。
var newNode=box.cloneNode(false);//如果传入的false那么就是只克隆标签不再复制内容。
1
2
3
随机数计算
Math.random() [0,1)能取到0但是不能取到1;
如果想要获取任意两个数之间的随机数:
例如:236-463 先计算差,然后用Math.random()*差 + 第一个数
var ran=Math.random()*(463-236)+236;
1
ondblclick 双击触发
替换节点
replaceChild();
替换节点:父节点.replaceChild(新节点,要替换掉的子节点);
//创建一个新标签
var newp=document.createElement("p");
newp.innerHTML="我是新的p标签";
box.replaceChild(newp,p);
//replaceChild()方法的第一个参数是新的参数,第二个是需要被替换的参数;
//替换掉的参数并没有删除,只是不显示,但是还是存在,可以继续使用。
box.appendChild(p);
1
2
3
4
5
6
7
节点的类型
节点的类型分为元素节点,文本节点,属性节点。
节点的三大属性
三大节点的详解
每个节点都有三个属性
nodeType 用于获取节点的类型
获取结果是一个数值:
1为元素节点 2为属性节点 3为文本节点
nodeName 节点名
元素节点的节点名就是标签名
nodeValue 节点值
元素节点没有节点值,值为null,文本节点的节点值就是文本,属性节点的节点值就是该属性值。
属性的操作
当我们在行内设置自定义属性时,无法通过标签.属性的形式直接获取
使用节点.getAttribute(“属性名”)获取属性
使用节点.setAttribute(“属性名”,”新的属性值”)设置属性
节点.removeAttribute(“属性名”) 可以移出指定属性
注意:通过上面的方式获取的结果只是属性,而不是属性节点
想要获取属性节点使用 节点.getAttributeNode(“属性名”);
<td id="john" name="myname">John</td>
var john=document.getElementById("john").getAttributeNode("name");//这样获取到的就是一个属性节点。
hohn.nodeValue=节点.getAttrbute("name");
1
2
3
4
获取到的节点的节点值相当于getAttribute获取的值。
所以我们一般不是用属性节点进行操作。
原生js操作Dom命令总结的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
- 原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
- 原生js操作dom备忘
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
随机推荐
- JavaScript的 sourcemap 的理解
当我们在使用vue-cli 开发项目完成后, 就要进行部署,执行npm run build 命令,你会发现它生成.js文件的同时,还会生成一个对应的.map 文件. 当时查了一下, .map 文件的主 ...
- [离散时间信号处理学习笔记] 9. z变换性质
z变换描述 $x[n] \stackrel{\mathcal{Z}}{\longleftrightarrow}X(z) ,\quad ROC=R_x$ 序列$x[n]$经过z变换后得到复变函数$X(z ...
- PC平台主要SIMD扩展发展简史
Single Instruction Multiple Data,简称SIMD.SIMD描述的是微处理器中单条指令能完成对数据的并行处理.SIMD所使用的是特殊的寄存器,一个寄存器上存储有多个数据,在 ...
- [代码]--给任意网站添加聊天功能,随时聊(fa)天(che)
感谢“topurl.cn”制作此功能并分享. 这是一段代码,在打开的网页中使用,可以加载一个外挂形式的聊天室功能, 就可以和同样访问此网站进行相同操作的网友进行聊(fa)天(che)了. 使用方法: ...
- 自定义Wed框架
Wed框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义wed框架 impor ...
- 洛谷P1622释放囚犯
题目: 这个题很明显是一个区间DP,但是比较不同的是,这个题它很像区间DP的经典题——石子合并. 然后我傻傻的搞了这个题搞了一下午,然后几乎看遍了全网的题解,就只看懂了这个方法,可能是我太菜了吧,但是 ...
- POJ3417 Network(算竞进阶习题)
LCA + 树上差分(边差分) 由题目意思知,所有主要边即为该无向图的一个生成树. 我们考虑点(u,v)若连上一条附加边,那么我们切断(u,v)之间的主要边之后,由于附加边的存在,(u,v)之间的路径 ...
- CF1106F Lunar New Year and a Recursive Sequence
题目链接:CF1106F Lunar New Year and a Recursive Sequence 大意:已知\(f_1,f_2,\cdots,f_{k-1}\)和\(b_1,b_2,\cdot ...
- Error fetching command 'collectstatic': You're using the staticfiles app without having set the STATIC_ROOT setting to a filesystem path. Command 'collectstatic' skipped
报错现象 报错解决 在 settings.py 中添加这一句话则可以解决 STATIC_ROOT = os.path.join(BASE_DIR, 'static') 测试不在有问题
- day5 模拟用户登录
_user= "yangtuo" _passwd = " # passd_authentication = False #flag 标志位 for i in range( ...