JS经典实例网站首页 JS经典实例

javascript学习笔记-DOM基础

发布时间：2018-04-05 18:04:17编辑：雪饮阅读（）

元素的一些通用属性的获取

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

var box=document.getElementById("box");

//直接获取元素属性id

//alert(box.id);

//直接获取元素属性title

//alert(box.title);

//直接获取元素属性style(对象)

//alert(box.style);

获取元素的style内部需要以键值对的方式获取

不同浏览器会有获取到值的差异，比如获取的是rgb格式或者原样输出

比如browserSim浏览器就输出的是rgb格式

//alert(box.style.color);

//获取元素的class属性

alert(box.className);

</script>

直接调用的属性也可以直接赋值

var box=document.getElementById("box");

box.id="dmj";

获取html所有元素

var box=document.getElementsByTagName("*");

onclick直接访问则返回的是一个函数式

通过getAttribute则可以返回字符串

var box=document.getElementsByName("box")[0];

alert(box.onclick);

</script>

属性的移除

var box=document.getElementsByName("box")[0];

box.removeAttribute("onclick");

</script>

获取节点属性

节点可以分为元素节点、属性节点和文本节点。

var box=document.getElementsByName("box")[0];

alert(box.nodeType);

nodeType为1表示元素节点，2属性节点，3文本节点(包含空白节点换行)

获取第一个子节点

alert(box.firstChild.nodeValue);

获取末尾节点

alert(box.lastChild.nodeValue);

获取该节点的文档根节点，相当与 document

alert(box.ownerDocument);

//等效

alert(document);

获取兄弟节点-下一个节点

alert(box.nextSibling.nodeName);

获取兄弟节点-上一个节点

alert(box.previousSibling.nodeName);

获取一个元素的所有属性

console.log(box.attributes);

获取一个元素的指定属性

alert(box.attributes["dmj"].nodeName);

遍历删除节点的正确方式

由于childNodes.length随着每次删除节点后其值会改变，所以不能用传统的正向顺序来遍历删除。

var box=document.getElementById("box");

console.log(box.childNodes);

for(var i=box.childNodes.length-1;i<box.childNodes.length;i--){

box.removeChild(box.childNodes[i]);

}

alert(box.childNodes.length);

写入方法document.write

该方法会将当前代码所在的html以覆盖式重写，若当前文件中有多个该方法，则只覆盖一次，其余的进行叠加

另外，若写入的内容是html则也会自动解析创建html

document.write("杜敏捷");

将某个节点插入到另外一个节点之前

var box=document.getElementById("box");

//创建一个标签

var p=document.createElement('p');

var txt=document.createTextNode("杜敏捷");

p.appendChild(txt);

//将标签插入到某个标签之前

box.parentNode.insertBefore(p,box);

标签的替换

//获取一个标签

var box=document.getElementById("box");

//创建一个标签

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

var txt=document.createTextNode("杜敏捷");

p.appendChild(txt);

//用创建的标签替换获取的标签

box.parentNode.replaceChild(p,box);

标签的克隆

var box=document.getElementById("box");

var box2=box.cloneNode(true);

box.parentNode.appendChild(box2);

标签的克隆(不克隆其子元素)

var box=document.getElementById("box");

var box2=box.cloneNode(false);

box.parentNode.appendChild(box2);

关键字词：javascript,dom

上一篇：javascript学习笔记-浏览器检测

下一篇：javascript学习笔记-DOM进阶

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript学习笔记-DOM基础

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例