JavaScript系列(五):文档操作

弹窗

void alert(msg):弹出警告窗

string prompt(msg):弹出输入窗

boolean confirm(msg):弹出确认窗

元素

事件监听

element.addEventListener(event, function[, useCapture])useCapture 是否在捕获或者冒泡阶段执行

element.removeEventListener(event, function[, useCapture]):如果需要移出的话,function就不能写成匿名函数。

添加

appendChild(node):给元素添加子级元素

cloneNode(boolean):克隆此节点,如果传入true,将把此节点的所有子节点都克隆过去,
false则只克隆节点节点本身。

focus():设置或者获取焦点

element.setAttribute(attributename,attributevalue):设置元素的属性

element.setAttributeNode(attributenode):设置元素的属性,但是参数是一个属性节点

其他获取的属性都是(设置或获取)

获取

获取属性

element.attributes:获取属性数组

element.getAttributeNode(attributename):获取指定的属性

element.getAttribute():获取元素的属性

获取父节点

element.nextSibling:获取元素右边的元素

element.previousSibling:获取元素左边的元素

element.parentNode:返回元素的父节点

获取子节点

element.childNodes:获取元素的所有子节点

element.firstChild:获取元素的第一个子节点

element.lastChild:获取元素的最后一个子节点

element.querySelector():根据指定规则获取子元素

element.querySelectorAll():根据指定规则获取子元素

element.getElementsByTagName():根据标签(div、p)获取元素节点数组

element.getElementsByClassName():根据类名获取节点

获取元素信息

element.nodeName/Type/Value:获取元素的标记名(DIV)、类型、值(hello)

获取类名

element.classlist:获取元素的所有类名List

删除

element.removeAttribute(attributename):删除属性

element.removeAttributeNode(attributenode):删除并返回指定的属性节点

element.removeChild(node):删除第一个或者指定的子元素

element.replaceChild(node):替换一个子元素

element.remove():删除元素本身

文档

创建

document.createAttribute():创建一个属性

document.createComment():创建一个注释

document.createElement():创建一个元素

document.createTextNode():创建一个文本元素

获取元素

document. getElementsByClassName():根据类名获取元素数组

document.getElementById():根据ID获取元素

document.getElementsByName():根据名称获取元素数组

document.getElementsByTagName():根据标签获取元素数组

document.querySelector()/querySelectorAll():根据匹配指定的CSS选择器的第一元素、所有元素

document.forms:获取表单元素

document.images:获取图片元素

获取网站相关

document.baseURI:获取基础的URL

document.domain:获取域名

document.referrer:获取载入当前文档的URL

document.title:获取文档标题(不是网站标题)

document.URL:获取完整的URL

事件

document.addEventListener():给文档添加事件

document.removeEventListener():给文档删除事件`

备忘

对于全局的方法调用,this指向的是全局对象window

var name = "global this";
function globalTest() {
    this.name = "rename global this"
    console.log(this.name);
}
globalTest(); //rename global this

如果函数作为对象的方法调用,this指向的是这个上级对象,即调用方法的对象

function showName() {
    console.log(this.name);
}
var obj = {};
obj.name = "ooo";
obj.show = showName;
obj.show(); //ooo

构造函数中的this指向新创建的对象本身。

var name = "global name";
function showName() {
    this.name = "showName function";
}
var obj = new showName();
console.log(obj.name); //showName function
console.log(name); //global name

https://www.cnblogs.com/Nancy-wang/p/6928395.html

Last modification:March 3rd, 2018 at 08:46 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment