JS DOM操作

最新推荐文章于 2024-01-05 15:27:39 发布
最新推荐文章于 2024-01-05 15:27:39 发布
阅读量200 收藏
点赞数
分类专栏： JS学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChristWTF/article/details/104156549
版权

文章目录

一 节点查找方法

1. 获取元素节点

1. getElementById() 只能通过document调用

//通过id属性获取一个元素节点对象
document.getElementById("tag");
//当有其他标签的name也为tag 且在上面 会选错
//当多个标签id都为tag时 只选择最上面的那个
//修正方法
var getElementById = function(id){
    var el=document.getElementById(id);
    if(!+"\v1"){//判断是不是IE
        if(el && el.id === id){
            return el;
        }else{
            var els=document.all[id],
                n=els.length;
            for(var i=0;i<n;i++){
                if(els[i].id === id)
                    return els[i];
            }
        }
    }
    return el;
}

2. getElementsByName() 只能通过document调用

//通过name属性获取一组元素节点对象 返回一个类数组对象
 document.getElementsByName("name");

3. getElementsByTagName() 可不通过document调用

//通过标签名获取一组元素节点对象 返回一个类数组对象
//主要用于处理表单项
var li1=document.getElementsByTagName("li");
var li2=document.getElementsByTagName("Li");//大写也可以
var inputs=document.getElementsByTagName("Input");
var all=document.getElementsByTagName("*");//获得全部标签
console.log(li2.length);
console.log(inputs[0].value);

2. 获取元素子节点

1. getElementsByTagName（）[仅此一个方法，其他都是属性]

var p=document.getElementById("ul");
var q=p.getElementsByTagName("li");
for(var i=0;i<q.length;i++){
	alert(q[i].innerHTML)
}

2. childNodes

//获取当前元素的子结点
var p=document.getElementById("ul");
//IE8及其以上浏览器中，会将空白文本（标签之间的换行）也当成子结点，IE8及其以下不会
console.log(p.childNodes.length)//会多于标签个数

3. children [推荐使用]

//获取当前元素的子元素类数组（childNodes是返回节点）
var p=document.getElementById("ul");
console.log(p.children.length)
console.log(p.children.item(1))
console.log(p.children[1])

4. firstChild

//获取当前元素的第一个子结点（包括空白文本节点）
var p=document.getElementById("ul");
console.log(p.firstChild)

5. firstElementChild

//获取当前元素的第一个子元素
//不支持IE8及其以下的浏览器
var p=document.getElementById("ul");
console.log(p.firstElementChild)

6. lastChild

//获取当前元素的最后一个子结点（包括空白文本节点）
var p=document.getElementById("ul");
console.log(p.lastChild)

3. 获取父亲节点和兄弟节点

1. parentNode

//获取当前元素的父节点（但不会有空节点）
var p=document.getElementById("ul");
console.log(p.lastChild)

2. previousSibling

//获取当前节点的前一个兄弟节点（会获取空节点）
var p=document.getElementById("ul");
console.log(p.previousSibling)

3. previousElementSibling

//获取当前节点的前一个兄弟元素 IE8及其以下不支持
var p=document.getElementById("ul");
console.log(p.previousElementSibling)

4. nextSibling

//获取当前节点的后一个兄弟节点
var p=document.getElementById("ul");
console.log(p.nextSibling)

5. nextElementSibling

//获取当前节点的下一个兄弟元素 IE8及其以下不支持
var p=document.getElementById("ul");
console.log(p.nextElementSibling)

4. getElementsByClassName 可不通过document调用 H5新增

//IE8及其以下浏览器不支持
var ul=document.getElementById("ul");
var lis1=ul.getElementsByClassName("light");
var lis2=ul.getElementsByClassName("light dark");
//获得同时具有两个class的标签 class顺序可换

5. querySelector() 返回指定选择器的第一个元素对象 可不通过document调用 H5新增

//需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
//IE8中虽然没有getElementsByClassName() 但是可以用querySelector()代替
var els=document.querySelector("div");
var els=document.querySelector(".box div");
//寻找.box 下的 div
var els=document.querySelector("div");
var ul=document.querySelector("#ul");
var li=document.querySelector(".li");
var lis=ul.querySelector("li:last-child");
var inp=document.querySelector("input,li");
//只能找到input 要找到多个得用 document.querySelectorAll()
var item=document.querySelector(".foo\\:bar");
//:等字符得转义

6. querySelectorAll() 返回指定选择器的所有元素对象 可不通过document调用 H5新增

//将符合条件的元素封装到一个类数组中返回
//即使符合条件的元素只有一个 也会返回类数组
//返回的是 StaticNodeList 和 getElementsByTagName不一样呢，不具动态性
document.querySelectorAll("div");

7. 获取特殊元素 body html all *

var bd=document.body;//获取body
var ht=document.documentElement;//获取html
var all=document.all;//获取页面所有元素
var all=document.getElementsByTagName('*');//获取页面所有元素

二 增删改

1. appendChild()

var ul=document.getElementById("ul");
var txt=document.createTextNode("4");
var li=document.createElement("li");
var first=ul.firstElementChild;
li.appendChild(txt);
ul.appendChild(li);
ul.appendChild(first);
//将第一个子节点移到最后

2. createElement与createTextNode

var ul=document.getElementById("list");
var li=document.createElement("li");//创建标签
var txt=document.createTextNode("文本内容");//创建文本节点
li.appendChild(txt);//将文本节点插入到li标签中
ul.appendChild(li);//将li标签插入到ul中

3. insertBefore

//将新节点插入到指定节点前面
// 语法 父节点.insertBefore(新节点，目标节点)
var ul=document.getElementById("list");
var obj=document.getElementById("obj");
//obj为ul的子节点
var nli=document.createElement("li");//创建标签
ul.insertBefore(nli,obj)

//注意 children.item()的使用
var li=ul.children.item(1);
ul.insertBefore(nli,li);
ul.insertBefore(nli,null);//添加到最后

4. replaceChild()

var ul=document.getElementById("list");
var obj=document.getElementById("obj");
//obj为ul的子节点
var nli=document.createElement("li");//创建标签

ul.replaceChild(nli,obj);
ul.replaceChild(nli,ul.children.item(2));
//replace有返回值 返回的是被替换的节点
var returnNode = ul.replaceChild(nli,obj);

5. removeChild()

var ul=document.getElementById("list");
var del=ul.removeChild(ul.childNodes[1]);
//childeNodes是伪数组，索引从0开始
//但是1才是第一个子标签，因为还有空白节点

var ul=document.getElementById("list");
var obj=document.getElementById("obj");
ul.removeChild(obj)	//一种形式
obj.parentNode.remove(obj)	//简单一点的形式

6. removeNode()

var ul=document.getElementById("list");
var remove=ul.removeNode();		//默认不删除子结点
var remove1=ul.removeNode(true);//子结点全部删除

7. innerHTML实现

var ul=document.getElementById("list");
ul.innerHTML += '<li>广州</li>'	//添加一个标签
//但是不推荐这么做，因为这样相当于把原有的标签全部替换了一遍
//原来绑定在上面的时间会全部撤除

//故用下面的方式
var ul=document.getElementById("list");
var nli=document.createElement("li");//创建标签
nli.innerHTML = 'guangzhou'
ul.appenChild(li)

三 操作样式

1. style 读取内联样式

//通过style属性设置的样式是内联样式
//而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
//但是如果在CSS样式中添加了!important，即使通过JS也不能覆盖该样式
//所以尽量不要为样式添加!important
var box=document.getElementById("div");
box.style.width = "300px";
box.style.height = "300px";
box.style.backgroundColor = "yellow";

//通过style属性设置和读取的都是内联样式，CSS样式表里的样式读不出来
console.log(box.style.width)

2. currentStyle 读取显示样式（只有IE支持）

//读取显示的样式，既不是特定读取CSS样式，也不是特定读取内联样式
//如果当前元素没有设置样式，则返回默认样式
var box=document.getElementById("div");
console.log(box.currentStyle.width)

3. getComputedStyle() 获取元素当前样式

//这个方法是window的方法，可直接使用
//需要传两个参数 一参：要获取样式的元素 二参：可以传递一个伪元素，一般传null
//该方法返回一个对象，对象中封装了当前元素对应的样式
//对于没有设置的样式，会获取到真实值，而不是默认值
//不像currentStyle对于未设置的width返回auto，该方法会获得一个实际的值
//该方法不支持IE8及其以下浏览器
var box = document.getElementById("div");
var obj = getComputedStyle(box,null);
console.log(obj.width)

4. 封装兼容的获取样式方法

//getComputedStyle()和currentStyle只能读取样式，不能设置样式，样式设置得用style
var box = document.getElementById("div");
console.log(getStyle(box,"width"))
function getStyle(obj,name){
//此处一定要加window 不加window是变量，寻找不到会报错，后面都不执行
//加window后是windos的一个属性，只看有没有
	if(window.getComputedStyle){
		return getComputedStyle(obj, null)[name]
	}else{
		return obj.currentStyle[name]
	}
}

5. clientWidth ClientHeight

//返回可视区域的宽/高 如果有滚动条等会减去滚动条的宽高
//clientWidth和ClientHeight是只读属性，不能修改
//返回 内容区 + 内边距 
var box = document.getElementById("div");
console.log(box.clientWidth)
console.log(box.ClientHeight)

6. offsetWidth offsetHeight

//offsetWidth offsetHeight 是只读属性，不能修改
//返回 内容区 + 内边距 + 边框
console.log(box.offsetWidth)
console.log(box.offsetHeight)

7. offsetLeft offsetTop

返回相对于其定位父元素的偏移量

8. offsetParent

//获取当前元素最近的开启定位的祖先元素

9. scrollWidth scrollHeight

获取元素整个滚动区域的宽度/高度

10. scrollTop scrollLeft

//获取元素滚动条滚动的距离
//当满足 scrollHeight - scrollTop == clientHeight
//说明滚动条滚动到底了
//可以用于协议阅读判断
  1. createComment与createDocumentFragment
    var comment=document,createComment("A comment");//创建注释文档
var fragment=document.createDocumentFragment();//创建文档片段
var ul=document.getElementById("list");
var li=null;
for(var i=0;i<3;i++){
   li=document.createElement("li");
   li.appendChild(document.createTextNode("item" + (i+1)));
   fragment.appendChild(li);
}
ul.appendChild(fragment);
document.body.insertBefore(comment,document.body.firstChild);

5. 操作节点

  1. cloneNode()
    var ul=document.getElementById("ul");
var nul=ul.cloneNode();//只克隆本身，不克隆子结点
var nul=ul.cloneNode(true);//克隆子结点
  2. normalize()
    var div=document.createElement("div");
var textNode=document.createTextNode("DOM探索");
div.appendChild(textNode);
var textNode2=document.createTextNode("后续");
div.appendChild(textNode2);
document.body.appendChild(div);
div.normalize();//使两个文本节点合并成一个
  3. splitText()
    var div=document.createElement("div");
var textNode=document.createTextNode("DOM探索");
div.appendChild(textNode);
document.body.appendChild(div);
var n=div.firstChild.splitText(2);
console.log(div.firstChild.nodeValue);//DO
console.log(n);//DO后面的内容
console.log(div.childNodes.length);//2

获取元素内容

  1. innerHTML与innerText
//获取到元素内部HTML代码 对于自结束数标签没有意义
var content=document.getElementById('content');
console.log(content.innerHTML)//若有标签，标签也会被打印（识别）
console.log(content.innerText)//若有标签，标签会被去除
var str='<p>this is a <em>paragraph</em></p>'+
    '<ur>' +
    '<li>item1</li>' +
    '<li>item2</li>' +
    '</ur>';
content.innerHTML=str;
p.innerText=str;//<p>标签会被保留，不会创建
//innerHTML 识别html标签 W3C标准 保留空格和换行
//innerText 不识别html标签 非标准 不保留空格和换行


//打印属性 但是不能打印class属性 class属性要用 .className
console.log(content.value)	
console.log(content.className)

2. 节点遍历

  1. 节点遍历方法
    var ht=document.documentElement;//获得根元素html
//var hd=ht.firstChild; 获得head
//var hd=ht.childNodes[0];
var hd=ht.childNodes.item(0);
var bd=ht.childNodes[1];
console.log(ht.tagName) //打印标签名
console.log(hd.parentNode == ht);//true
console.log(bd.previousSibling == hd);//true
console.log(hd.nextSibling == bd);//true

var p=document.getElementById("pa");
console.log(p.ownerDocument == document);//true
//ownerDocument找到根节点
console.log(p.hasChildNodes());//true
//虽然p为最里面的节点 但还是可以有子结点
console.log(p.childNodes[0].hasChildNodes());//false
  2. 打印节点树
    var s="";
function travel(space, node) {
    if(node.tagName){
        s += space + node.tagName + '<br/>';
    }
    var len=node.childNodes.length;
    for(var i=0;i<len;i++){
        travel(space + '|-', node.childNodes[i]);
    }
}
travel("",document);
document.write(s);
  3. 遍历去掉非标签节点（文本节点）
    var box=document.getElementById("box");
for(var i=0,len=box.childNodes.length;i<len;i++){
    if(box.childNodes[i].nodeType == 1){
        console.log(box.childNodes[i]);
    }
}
  4. 节点遍历新API（不包含空白文本节点，IE8以下不支持）
    //firstElementChild lastElementChild
//nextElementSibling previousElementSibling
//children[]
var box=document.getElementById("box");
for(var i=0,len=box.childElementCount;i<len;i++){
    console.log(box.children[i]);
}

3. 类数组对象（基于DOM结构动态执行查询的结果，每当文档结构发生变化时，他们会得到更新）

  1. NodeList
    var box=document.getElementById("box");
var nodes=box.childNodes;
console.log(nodes);//类数组 但没有push等方法
console.log(nodes[1]);
console.log(nodes.item(1));

//类数组转数组
function ar(nodelist){
	var arr=new Array();
	for(var i=0,len=nodelist.length;i<len;i++){
		arr.push(nodelist[i]);
	}
	return arr;
}
//简便方法（有兼容性问题）
function arr(nodelist){
	return Array.prototype.slice.call(nodelist);
}
//改进
function arrr(nodelist){
	var arr=null;
	try{
		return Array.prototype.slice.call(nodelist);
	}catch(e){
		arr=new Array();
		for(var i=0,len=nodelist.length;i<len;i++){
			arr.push(nodelist[i]);
		}
	}
	return arr;
}
  2. HTMLCollection
    var scripts=document.scripts;
var links=document.links;
var cells=document.getElementById("tr").cells;
var imgs=document.images;
var forms=document.forms;
var options=document.getElementById("select").options;
var cla=document.getElementsByClassName("class"); //s
var ps=document.getElementsByTagName("p");

console.log(cells.namedItem('td'));//先找id为td的标签，若没有找name为td的标签
        //多个重复的只返回一个
  3. NamedNodeMap
    var attrs=box.attributes;
console.log(attrs);//返回box属性的类数组

表单

//表单里的type value checked selected disabled不能用innerHTML来操作
var btn=document.querySelector('button');
var inp=document.querySelector('input');
btn.onclick=function(){
	inp.value='被点击了';
	this.disabled=true;//or btn.disabled =true;
}

获取文本

//读取文本框的value属性值，就是文本框中的内容
var tx=document.getElementById('text')
console.log(tx.value)
tx.value = "haixing"	//设置文本框内容

//获取元素的中的文本
console.log(tx.innerHTML)
console.log(tx.innerText)	//没有子标签了
var text = tx.firstChild	//文本节点作为标签的第一个子结点,此时获取的是节点 还未获取节点中的文本
console.log(text.nodeValue)
  1. 节点遍历方法
    var ht=document.documentElement;//获得根元素html
//var hd=ht.firstChild; 获得head
//var hd=ht.childNodes[0];
var hd=ht.childNodes.item(0);
var bd=ht.childNodes[1];
console.log(ht.tagName) //打印标签名
console.log(hd.parentNode == ht);//true
console.log(bd.previousSibling == hd);//true
console.log(hd.nextSibling == bd);//true

var p=document.getElementById("pa");
console.log(p.ownerDocument == document);//true
//ownerDocument找到根节点
console.log(p.hasChildNodes());//true
//虽然p为最里面的节点 但还是可以有子结点
console.log(p.childNodes[0].hasChildNodes());//false

一 DOM
DOM 文档对象模型（Document Object Model）

  1. 文档 表示整个HTML网页文档
  2. 对象 表示将网页每个部分都转换为对象，方便属性操作
  3. 模型 使用模型表示对象之间关系，方便我们获取对象（DOM树）
超人不会飞/
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS的DOM对象创建元素
05-31 290
在JavaScript中，我们可以使用createElement（ ）来创建一个元素节点，也可以使用createTextNode（ ）来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。这种方式又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JavaScript创建的元素。这个元素一开始在HTML中是不存在的。
前端javascript的DOM对象操作技巧，全场景解析
景天科技苑
03-09 1811
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。
js 创建dom的几种方式
stpzhf的博客
01-05 644
【代码】js 创建dom的几种方式。
JavaScript（三）——DOM操作之如何创建DOM对象
似水流年，是谁苍白了等待
01-12 1467
前言： 上篇文章大概说了一下DOM，但是还不是很了解，这里在说说。 一、什么是DOM？ DOM是英文Document Object Model的缩写，即文档对象模型。它是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档当作一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。相信学习过BS的人都知道，对HTML应用很广...
js基础知识（二十七）--DOM对象的创建、插入
weixin_47928499的博客
08-08 3149
DOM对象的创建、插入
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript dom操作 删除元素 示例代码
最新发布
06-27
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
创建 DOM 元素的几种方式
angry_rooster的博客
06-23 8584
通过write()、createElement()和innerHTML创建元素 document.write() document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串 document.write(markup); 类似的还有一个document.wirteln()，只是最后紧跟一个换行符 如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点 但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4908
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
js 生成简单的dom
逆风优雅的博客
03-08 591
<body> </body> <script> function div(options={}) { let div = document.createElement('div') // 创建div // 设置创建的div的样式 div.style.width = options.width?options.width:'500px' div.style.height = options.
04——javascript Dom 动态创建元素 操作样式
幺生
11-08 3766
——采自传智播客的教学笔记(手打难免有错)
JS创建虚拟DOM节点
带刺玫瑰的博客
12-07 1669
创建虚拟DOM之前先看一下什么是DOM，DOM生成的节点是由浏览器直接管理的，开发中免不了操作DOM进行增删改查，当每次删除或新增节点的时候都需要重新渲染新的DOM，所以性能也就没那么好了。 虚拟DOM节点就可以解决这一性能问题，解决的原理是不直接渲染DOM元素，而是用一个变量来存储这些节点然后渲染进去，如果需要对节点进行操作只需要操作这个变量即可，这样不会重新渲染节点，因为你操作的只是一个变量。 创建虚拟DOM的例子： <!DOCTYPE html> <html lang="en"&gt
JavaScript动态创建DOM（七）
AI浩
06-02 5886
动态创建DOM document.write只能在页面加载过程中才能动态创建。 可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title&gt...
原生js中如何添加dom元素
热门推荐
zl13015214442的博客
05-22 3万+
1. appendChild() 概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。 使用方式：fatherdom.appendChild( insertdom )。 兼容性：所有浏览器都支持此方法。 2. insertBefore() 概念：把要插入的节点添加到指定父级里面的指定节点之前。 使用方式：fatherdom.insertBefore( insertdom，chose...
动态通过JS创建DOM后没有CSS样式
liukai6的博客
02-27 3842
通过js动态创建的没有样式,我们可以自己设置css样式达到效果 td.setAttribute('style','border:1px #DDDDDD solid ;padding:5px'); 这是我创建表格后没有表格的线手动添加设置的css
js DOM节点创建，操作，删除，替换
weixin_38199437的博客
08-28 7519
创建节点： document.createElement() 创建元素节点。 document.createTextNode() 创建文本节点。 document.cloneNode() 克隆节点。 注意：   document.createTextNode()与innerHTML的区别：innerHTML和createTextNode都可以把一段内容添加到一个...
JavaScript DOM操作与基本知识点解析
"这篇资源主要介绍了JavaScript的基本操作，特别是与DOM（Document Object Model）相关的知识，包括节点操作、元素选择以及窗口加载事件的处理。通过示例代码解析了DOM节点的层次结构，以及如何通过JavaScript获取和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值