常用的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命令总结的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  3. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  4. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  5. 原生Js操作DOM

    查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...

  6. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

  7. 原生js操作dom备忘

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  9. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

随机推荐

  1. JavaScript的 sourcemap 的理解

    当我们在使用vue-cli 开发项目完成后, 就要进行部署,执行npm run build 命令,你会发现它生成.js文件的同时,还会生成一个对应的.map 文件. 当时查了一下, .map 文件的主 ...

  2. [离散时间信号处理学习笔记] 9. z变换性质

    z变换描述 $x[n] \stackrel{\mathcal{Z}}{\longleftrightarrow}X(z) ,\quad ROC=R_x$ 序列$x[n]$经过z变换后得到复变函数$X(z ...

  3. PC平台主要SIMD扩展发展简史

    Single Instruction Multiple Data,简称SIMD.SIMD描述的是微处理器中单条指令能完成对数据的并行处理.SIMD所使用的是特殊的寄存器,一个寄存器上存储有多个数据,在 ...

  4. [代码]--给任意网站添加聊天功能,随时聊(fa)天(che)

    感谢“topurl.cn”制作此功能并分享. 这是一段代码,在打开的网页中使用,可以加载一个外挂形式的聊天室功能, 就可以和同样访问此网站进行相同操作的网友进行聊(fa)天(che)了. 使用方法: ...

  5. 自定义Wed框架

    Wed框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义wed框架 impor ...

  6. 洛谷P1622释放囚犯

    题目: 这个题很明显是一个区间DP,但是比较不同的是,这个题它很像区间DP的经典题——石子合并. 然后我傻傻的搞了这个题搞了一下午,然后几乎看遍了全网的题解,就只看懂了这个方法,可能是我太菜了吧,但是 ...

  7. POJ3417 Network(算竞进阶习题)

    LCA + 树上差分(边差分) 由题目意思知,所有主要边即为该无向图的一个生成树. 我们考虑点(u,v)若连上一条附加边,那么我们切断(u,v)之间的主要边之后,由于附加边的存在,(u,v)之间的路径 ...

  8. 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 ...

  9. 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') 测试不在有问题

  10. day5 模拟用户登录

    _user= "yangtuo" _passwd = " # passd_authentication = False #flag 标志位 for i in range( ...