常用的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. 【嵌入式】Arduino编程基础到应用全解析

    Arduino Author: Andrew.Du 基础 基础语法: setup() loop() pinMode(引脚,模式) pinMode(13,OUTPUT):设置13号引脚为输出 //在使用 ...

  2. webpack——快速入门【一】

    学习webpack https://github.com/webproblem/learning-article#webpack https://github.com/lengziyu/learn-w ...

  3. Android Dialog 简单封装

    转载:https://www.cnblogs.com/zjjne/archive/2013/10/03/3350382.html public class MyAlertDialog { //regi ...

  4. 数据库 -- pymysql

    pythen3连接mysql pymsql介绍 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中则使用mysqldb. Django中也可以使用P ...

  5. P1282 多米诺骨牌 dp

    思路:dp[i][j] 的j是上半段的和的值   这里表示的是达到上半段值是j的最小次数 答案在最小的可达到的j #include<bits/stdc++.h> using namespa ...

  6. ☆ [POJ2559] Largest Rectangle in a Histogram 「单调栈」

    类型:单调栈 传送门:>Here< 题意:给出若干宽度相同的矩形的高度(条形统计图),求最大子矩形面积 解题思路 单调栈的经典题 显然,最终的子矩形高度一定和某一个矩形相等(反证).因此一 ...

  7. 【UOJ348】【WC2018】州区划分 状压DP FWT

    题目大意 给定一个\(n\)个点的无向图,对于每种 \(n\) 个点的划分\(\{S_1,S_2,\ldots,S_k\}\),定义它是合法的,当且仅当每个点都在其中的一个集合中且对于任何的\(i\i ...

  8. 【XSY2332】Randomized Binary Search Tree 概率DP FFT

    题目描述 \(\forall 0\leq i<n\),求有多少棵\(n\)个点,权值和优先级完全随机的treap的树高为\(i\). \(n\leq 30000\) 题解 设\(f_{i,j}\ ...

  9. 二叉搜索树(BST)详解

    前言:平衡树的前置知识吧 二叉搜索树的定义: 二叉搜索树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子树不空,则左子树上所有结点的值均小于或等于它的根节点的值: (2)若右子树不空,则右子 ...

  10. 自学zabbix集锦

    zabbix概念集锦 01 Zabbix采集数据方式 02 开源监控软件Cacti.nagios 03 Zabbix常用的术语 04 Zabbix核心概念回顾 05 Zabbix triggers-- ...