首页 > 编程语言 >JavaScript--DOM

JavaScript--DOM

时间：2022-10-28 20:15:56浏览次数：64  
标签：JavaScript console log DOM -- 元素 div 节点 属性

一、DOM的概述

1、文档对象模型（DOM，Document Object Model）是 HTML 和 XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。
2、DOM 现在是真正跨平台、语言无关的表示和操作网页
的方式。

二、DOM的结构

当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一 个树状结构（DOM Tree）。
image.png
上图中的每一个方框是文档的一个节点，它表示一个Node对象，而所有节点组成了节点树（DOM树）。

三、document 文档对象

1、选取文档元素

1.1 用指定ID选取元素

任何HTML元素都可以有一个id元素，但在文档中该值必须唯一，即同一个文档中的元素不能出现有相同的ID。可以用 Document 对象的getElementById() 方法选取特定ID的元素。

<div id="div"></div> 
document.getElementById('div');
1.2 用指定名字选取元素

基于name属性的值选取HTML元素，可以使用 Document 对象的getElementsByName() 方法，返回一个NodeList对象 （类数组对象）。

<input name="input"/> 
var inputs = document.getElementsByName('input'); 
inputs[0].tagName //input
1.3 用指定标签名选取元素

Document 对象的getElementsByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素，也是返回 一个NodeList对象。

document.getElementsByTagName('span') // 选取所有span元素

扩展：给 getElementsByTagName() 传递通配符参数“*”，将获得一个代表文档中所有元素的NodeList对象。

1.4 用指定CSS类选取元素

在HTML文档和HTML元素上，我们可以调用 getElementsByClassName() 来选择指定CSS类的元素，它返回一个实时的 NodeList对象，包含文档或元素所有匹配的后代节点。

var content = document.getElementsByClassName('content') 
console.log(content); console.log(content[0]); 
//访问第一个获取的元素

getElementsByClassName() 只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成，只有当元素的 class属性值包含所有指定的标识符时才匹配。

1.5 通过CSS选择器选取元素

1）querySelectorAll()
Document 对象的方法 querySelectorAll() ，它接受一个CSS选择器的字符串参数，返回一个代表文档中匹配选择器 的所有元素的NodeList对象，并不是实时的。如果没有匹配的元素，则返回一个空的NodeList对象。

document.querySelectorAll('.div') //匹配所有class名为div的元素

2）querySelector()
原理和 querySelectorAll() 是一样的，不过它返回第一个匹配的元素（以文档 顺序），如果没有匹配的元素就返回null。

它们支持复杂的CSS选择器。

// 选中data-tip属性等于title的元素 
document.querySelectorAll('[data-tip="title"]'); 
// 选中div元素，那些class含ignore的除外 
document.querySelectorAll('div:not(.ignore)');

注意：但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。

1.6获取根节点
console.log(document.getRootNode()); //获取根节点

2、创建、插入，删除节点

2.1 创建节点

1）createElement()
创建新的Element节点可以使用Document对象的createElement()方法。给方法传递一个元素的标签名作为参数（对HTML文 档来说该标签名是不区分大小写的）。

var span = document.createElement('span')

2）createTextNode()
创建一个Text节点，参数为所要生成的文本节点的内容。

var newnode = document.createTextNode('content')

3）createAttribute()
生成一个新的属性对象节点，并返回它。参数是属性的名称。

var attr = document.createAttribute('password') 
//创建的是一个属性 默认为空值
//给属性对象赋属性值的操作 
attr.value = '123456' console.log(attr);

4）cloneNode()
用来复制已存在的节点。每个节点有一个cloneNode()方法，返回该节点的一个全新副本。传递一个可选的布尔值为参数，如果参数true则同时克隆该节点的所有后代节点，否则只克隆该节点，默认为false。

var cloneDiv = div.cloneNode() //进行元素克隆 
console.log(cloneDiv); //只会克隆自己 并不会克隆里面包含对应的内容 
var div1 = div.cloneNode(true) 
//里面是true的情况表示深度克隆 他会考虑所有的内容包括事件 
console.log(div1);

四、Element 元素对象

1、获取元素

获取元素 (document的相关方法 element也可以使用)

var element = document.getElementById('box') 
console.log(element.getElementsByTagName('img'));

2、 插入元素

我们可以用node的方法 append()、appendChild() 或 insertBefore() 来讲新节点插入到文档中。
1）append()和appendChild()
append 插入任意的子元素到对应的父元素内插入到后面，appendChild接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。

div.append("hello",content) 
//追加内容到当前元素里面的最后一个元素的后面 追加多个
parentNode.appendChild(newNode)

2）insertBefore()
用于将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。该方法返回被插入的新节点。

parenNode.insertBefore(newNode,oldNode)

注意：调用上面两个方法时，如果要插入的节点是已存在文档中的，那个节点将自动从它当前的位置移除并在新的位置重新插入。

扩展：Node对象并不存在insertAfter方法，如果你要将新节点插入到该节点的后面时，可以这样写：

function insertAfter(parentNode,newNode,oldNode){ 
    if(oldNode.nextSibling){ 
        parentNode.insertBefore(newNode,oldNode.nextSibling); 
    }else{ 
        parentNode.appendChild(newNode); 
    } 
}

3、删除和替换元素

1）removeChild()
从文档树中删除一个节点。
注意：该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上调用该方法，并将需要删除的子节点作为方 法参数传递给它。

n.parentNode.removeChild(n);

2）replaceChild()
删除一个子节点并用一个新节点替换它。也是在父节点上调用该方法，第一个参数是新节点，第二个参数是需要替代的节点。

var span = document.createElement('span'); 
n.parentNode.replaceChild(span,n);

3）replaceChildren()
用一个元素来替换里面所有的子元素

div.replaceChildren("hello") //替换所有的子节点 用传入的节点替换里面所有的子节点 
var content = document.createElement('div') 
div.replaceChildren(content) //替换所有的子节点 用传入的节点替换里面所有的子节点

4、对属性的操作

1）getAttribute()

//element.getAttribute(name) 
box.setAttribute('username','tom') 
console.log(box.getAttribute('width'));
//返回对应的值 一般都是string 
console.log(box.getAttribute('username'));
//返回对应的值 一般都是string

2）setAttribute()
这个方法接收两个参数：要设置的属性名和属性的值。如果属性已经存在，则 setAttribute()会以指定的值替换原来的值；如果属性不存在，则 setAttribute()会以指定的值创建该属性。

//element.setAttribute(name,value) 
//不仅可以操作 后续定义的属性 也可以操作本身就有的属性 
var box = document.querySelector('div') 
box.setAttribute('width','100px')

注意：使用 setAttribute()方法设置的属性名会规范为小写形式，比如"ID"会变成"id"。
3）removeAttribute()
不单单是清除属性的值，而是会把整个属性完全从元素中去掉。

//element.removeAttribute(name) 
box.removeAttribute('width')

5、属性

5.1 只读属性

1）获取父元素

// 相关属性 
var div = document.getElementsByTagName('div')[0] 
// 获取父元素 
console.log(div.parentElement);//body

2）获取子元素

// 获取子元素 
console.log(div.childElementCount); 
//子元素个数 
console.log(div.children); //获取子元素 （伪数组）

3）获取兄弟元素

// 获取兄弟元素 
// 前一个兄弟 (pre表示前面的) 
console.log(div.previousElementSibling);

// 后一个兄弟 （next表示后面） 
console.log(div.nextElementSibling)
5.2 所有元素都具备的属性

1）className

// className 获取对应的class名字 
console.log(div.className); 
div.className = 'abc'

2）id

//id 属性 获取对应的id 
console.log(div.id); //空值 
div.id = "box"

3）style

//元素的其他属性 所有元素都有的属性 
console.log(div.style); //相当于获取div里面style属性 内嵌样式 对象（只能读取style里面设 置的） 
console.log(div.style.width); //style里面设置的 100px 
console.log(div.style.height); //"" 不是style属性设置的不能读取 
// 可写的属性 style的用户 element.style.样式名 赋值就是给设置 不赋值就是获取 
div.style.backgroundColor = 'red'

4）title

//title 标题 
console.log(div.title); 
div.title = "hello"

5）name

// name属性 
console.log(div.name)

6）tagName（只读）

//tagName 大写的字符串 只读属性 
console.log(div.tagName);

7）innerHTML 及 innerText

//innerHtml 显示的html(所有) innerText 显示的文本（所有的文本） 
console.log(div.innerHTML); console.log(div.innerText); 
div.innerHTML = "<b>hello</b>" //解析html代码的 
div.innerText = "<b>hello</b>" //不会解析html代码的

8）attributes 获取所有的属性节点 （返回的是一个NameNodeMap）

console.log(ele.attributes);//nameNodeMap 伪数组 (key:value) 迭代器 
console.log(ele.attributes.length) 
//访问 
console.log(ele.attributes[0]) //属性节点对象 
console.log(ele.attributes['href'].nodeValue) 
console.log(ele.attributes['href'].value) 
for(var key in ele.attributes){ //字符串 
        console.log(ele.attributes[key]); 
}
// nameNodeMap的方法getNameItem setNameItem removeNameItem item 
//其中一个属性对象 
console.log(ele.attributes.getNamedItem('hello')); //设置 
var attr1 = document.createAttribute('abc') //属性节点 
attr1.value = 'bca' 
ele.attributes.setNamedItem(attr1) 
//remove属性 
ele.attributes.removeNamedItem('href') 
// item 获取属性对象 
console.log(ele.attributes.item(0));

9）每个元素默认带的属性 都可以通过对应的元素直接点出来

//所有元素对于本身自带属性都直接点出来 
var input = document.querySelector('input') 
console.log(input.placeholder); 
input.placeholder = "请输入" 
console.log(input.value); 
console.log(input.type); 
var a = document.querySelector('#a') 
console.log(a.href); 
var img = document.querySelector('img') 
console.log(img.src);

六、节点操作

1、节点分类

  • 元素节点 （element）
  • 属性节点 （attribute）
  • 文本节点 （text）

2、节点相关属性

  • parentElement 父元素（只能是element）
  • parentNode 父节点 （一般也是element）
  • childNodes 子节点 （伪数组 （nodeList）文本节点及元素节点）
  • children 子元素节点 （HTMLCollection element）
  • previousElementSibling 上一个兄弟元素节点 （element 元素节点）
  • previousSibling 上一个兄弟节点 （文本节点 元素节点）
  • nextElementSibling下一个兄弟元素节点 （element 元素节点）
  • nextSibling 下一个兄弟节点 （文本节点 元素节点）
  • lastChild 最后一个子节点 （文本节点 元素节点）
  • firstChild 第一子节点 （文本节点 元素节点）

注意：一般形式下 只有删了空文本节点才进行第一个和最后一个的获取。空文本空格换行及制表符都是空文本节点。

var ul = document.querySelector('ul') 
for(var i=0;i<ul.childNodes.length;i++){
         if(ul.childNodes[i].nodeType == 3 && /^\s+$/.test(ul.childNodes[i].nodeValue)){ 
                //删除子节点 
                ul.removeChild(ul.childNodes[i]) 
        } 
}
console.log(document.querySelector('ul').firstChild); 
console.log(document.querySelector('ul').lastChild);

3、节点分类的区分属性

  • nodeType 节点类型 （1表示元素节点 2表示属性节点 3表示文本节点）
  • nodeValue 节点值 （元素节点的节点值获取不到（null） 属性节点的节点值 属性值 文本节点 文本内
    容）
  • nodeName 节点名 （元素节点的节点就是标签名 属性节点的节点名就是属性名 文本节点 #text）
    image.png
var tagA = document.createElement('a') //元素节点 
tagA.innerHTML = "hello" 
var attr = document.createAttribute('name') //属性节点 
attr.value = '张三' 
var text = document.createTextNode('你好') //文本节点 
//nodeName 节点名 元素的节点名是大写的 属性节点节点名小写 文本节点都是#text （只读属性） 
console.log(tagA.nodeName,attr.nodeName,text.nodeName);// A name #text 
console.log(tagA.nodeType,attr.nodeType,text.nodeType);// 1 2 3 
console.log(tagA.nodeValue,attr.nodeValue,text.nodeValue);// null 张三 你好

4、相关的方法

  • cloneNode 方法 （克隆所有节点）
  • append 添加节点
  • appendChild 添加节点
  • replaceChild 替换节点
  • replaceChildren 替换所有的子节点
  • insertBefore 插入节点
  • removeChild 移除子节点

5、属性节点操作的相关方法

  • setAttributeNode 设置属性节点
  • getAttributeNode 获取属性节点
  • removeAttributeNode 删除属性节点
//setAttributeNode getAttributeNode removeAttributeNode 
console.log(ele.getAttributeNode('abc')); //返回属性节点对象 
var attr2 = document.createAttribute('abc') //属性节点 
attr2.value = '123456' 
ele.setAttributeNode(attr2) //同样的属性名会被覆盖 
var attr3 = document.createAttribute('abc') //属性节点 
attr3.value = '123456' 
//由于attr3和attr2不是一个对象 所有他的地址不一样 所以比对不成功所 以不能被删除 
// var attr3 = attr2 //attr3的地址和attr2的是一样这个时候就可以删除了 
ele.removeAttributeNode(attr3) //删除对于的属性节点

七、this 调用者是谁就指向谁

//生成对应的元素 加入某个地方 //个数 标签名 父元素 
var arr = [0,1,2,3,4,5,6,7,8,9,'+',"-","*",'/'] 
function initElement(tagName,parent,valueArr){ 
        for(var i=0;i<valueArr.length;i++){ 
                var element = document.createElement(tagName)       
                element.innerText = valueArr[i]   
                parent.appendChild(element) 
        } 
}
var box = document.querySelector('div') 
initElement('button',box,arr) //dom操作会影响页面的渲染速度（重复多次的渲染）（重绘和回流） 
//获取所有的按钮 
var btns = document.querySelectorAll('button') 
//遍历这个按钮组 
for(var i=0;i<btns.length;i++){ 
        btns[i].onclick = function(){ 
        // console.log(i); 14 
        // console.log(btns[i].innerText); 
        console.log(this.innerText); //指向对应的点击的按钮 
        } 
}
//点击事件是异步 先走同步 再走异步

标签：JavaScript,console,log,DOM,--,元素,div,节点,属性
From： https://www.cnblogs.com/zhouwying/p/16837214.html

相关文章

  • JavaScript--ES5和ES6（上）
    一、概述es表示ECMASCript，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6二、es5的新特性1、严格模......
  • python 爬虫 ----- xpath
    xpath是在XML文档中搜索内容的一门语言html是xml的一个子集 xml代码示例"""<book><id>1</id><name>野花遍地香</name><price>1.23</price><......
  • JavaScript--cookie
    一、概述cookie总是保存在客户端中（浏览器端）。cookie为了保存sessionID出现的。cookie的出现解决了http无状态的问题。二、特性cookie是不安全的cookie是可以被篡......
  • 调整input里面的输入光标大小并兼容主流浏览器
    在项目里碰到过一个问题，input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中。在FF下出现的情况是：点击input时，输入光标其实上跟i......
  • Linux运行当前目录的文件时为什么需要加
    1.在Windows和DOS操作系统中，当要求系统运行一个程序而没有告诉它程序所在的完整路径时，系统除了在当前目录下面寻找此程序外，就会到path中指定的路径去找。2.Linux并不会检......
  • JavaScript--Date
    一、Date的概述在JavaScript中，Date类型是用来保存日期的，它能精确到1970年1月1日之前或之后的285616年。二、Date的声明使用new关键字声明要创建一个日期对象，使用new操......
  • JavaScript--_==_和_===_
    一、""和"="简单介绍1）宽松相等（looseequals）==和严格相等（strictequals）===都用来判断两个值是否“相等”，但是它们之间有一个很重要的区别，特别是在判断条件上。2）正确的解......
  • JavaScript--AJXS
    协议（基于tcp/ip）超文本传输协议（HyperTextTransferProtocol，HTTP）是用于从WWW服务器传输超文本到本地浏览器的传输协议（transport）。它可以使浏览器更加高效，使网络传输减少。......
  • blog_02
    第二次博客作业目录第二次博客作业1.前言2.设计与分析(1)题目集47-2点线形系列4-凸四边形的计算(2)题目集57-1点线形系列5-凸五边形的计算-1(3)题目集57-2点线形系......
  • 读《OpenFlow:Enabling Innovation in Campus Networks》有感
    OpenFlow：南向接口协议最初是运用于校园网建设一、可编程网络的必要性巨量的已安装设备和协议不愿尝试在真实流量中展开实验以上两点导致网络创新难度大，高准入门槛......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99