博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS学习之路系列总结四象阵(此文犹如武林之中的易筋经,是你驰骋IT界的武功心法,学会JS五大阵法就学会了JS,博主建议先学三才阵)...
阅读量:6787 次
发布时间:2019-06-26

本文共 1398 字,大约阅读时间需要 4 分钟。

四象阵法: 增加 删除 改变 查找 【为了便于记忆,减少占用大脑内存,我命名为JS心法为:道阵法,两仪阵法,三才阵法,四象阵法,五行阵法,只需记住阵法的关键字,即可搜索大脑中相应的内容,学会JS五大阵法即可学会JS】

DOM操作增删该查 (Document文档 Object对象 Model模型)

增加节点:

var div=document.createElement("div");

var text=document.createTextNode("我是文本节点");

fatherNode.appChild(childNode);【在fatherNode元素内部添加childNode】

fatherNode.insertBefore(insertNode,targetNode);【在fatherNode元素内部添加childNode】

node.cloneNode(ture);【true复制node节点及其子节点,false只复制node节点,不填时默认为false,复制img标签时可以用false】

删除节点:

fatherNode.removeChild(childNode);【删除fatherNode元素内部节点childNode】

改变节点:

fatherNode.replaceChild(replaceNode,targetNode);【如果replaceNode是已存在节点,会把target删除,把replaceNode放在此处】

 

查找:

var idSelector=document.getElementById("#selector");

var tagSelector=document.getElementsByTagName("div");

var tagSelector=idSelector.getElementsByTagName("div");【只选择idSelector的div】

H5元素选择器

var classSelector=document.getElementsByClassName(".selector")【支持IE9+】

var query=document.querySelector("#selector") 【支持CS中所有的选择器】【支持IE8+】【返回第一个匹配的元素】

var queryAll=document.querySelectorAll(".selector")【支持CS中所有的选择器】【支持IE8+】【返回所有匹配的节点列表nodeList类数组】

【classList系列 IE9+支持】

classList.add("class1,class2.....") 【添加一个或多个类名】

classList.remove("class1,class2.....") 【删除一个或多个类名】

classList.toggel("class") 【切换类名】

classList.contains("class") 【判断类名是否存在,存在未true,不存在为false】

clasList.item(index) 【返回指定索引的类名】

classList.length 【返回类名的个数】

转载于:https://www.cnblogs.com/xingkongly/p/7668738.html

你可能感兴趣的文章
基类中定义的虚函数,子类中必须要覆盖吗?为什么?
查看>>
OGL 客户端API(一)
查看>>
ADF_Advanced ADF系列3_启用Fusion应用的安全性(Part1)
查看>>
SVN服务器搭建和使用(二)
查看>>
js数组及常用数学方法
查看>>
silverlight+wcf+linq to sql访问数据
查看>>
存板子专用
查看>>
PHP 笔记——Web页面交互
查看>>
在linux下使用curl访问 多参数url GET参数问题
查看>>
Linux命令pmap
查看>>
路飞学城-Python开发集训-第2章
查看>>
网易2016研发工程师笔试题 (整理)
查看>>
A New Effect About My Plugin render
查看>>
解决页面默认文本直接的小间距
查看>>
docker-6 管理工具
查看>>
禁止百度转码
查看>>
geoserver REST使用
查看>>
03 | 数组:为什么很多编程语言中数组都从0开始编号?
查看>>
web开发之php--- mvc 模式
查看>>
RGB565 转换 BMP24
查看>>