DOM(文档对象模型)

有一点菜

于 2021-08-31 18:55:04 发布

阅读量168

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_59595975/article/details/120024404

版权

DOM

DOM ==> Document Object Model (文档对象模型)
document 是DOM中的顶级对象其上一级是window对象
要操作页面的中标签元素，我们要先获取到标签元素

小知识:什么是伪数组

伪数组和数组一样都有索引下标和length属性表示长度

但是伪数组不能使用数组方法(数组.forEach/数组.map)

获取DOM方法

getElementById

通过id获取 id的element后面是没有s的
语法:document.getElementById("标签的id属性值")

返回值:标签元素; 若匹配不到则返回null

var div1 = document.getElementById("sex")
console.log(div1)

getElementsClassName

通过class获取

语法:document.getElementsClassName("类名")

返回值:对应类名的标签形成的伪数组; 若匹配不到同上

var div1 = document.getElementsByClassName('no');
 console.log(div1);//
var div66 = document.getElementsByClassName('div66');
console.log(div66);

getElementsByTagName

通过获取标签名
语法:document.getElementsByTagName("标签名")

返回一个伪数组，里面是匹配的标签;若匹配不到同上

var lis2 = document.getElementsByTagName('li');
console.log(lis2);
var uls = document.getElementsByTagName('ul');
console.log(uls);

querySelector

通过选择器获取元素
语法:querySelector("选择器")

返回匹配到的第一个元素，里面是匹配的选择器(写法与css样式中一样即可);若匹配不到同上

console.log(document.querySelector('#one'));
console.log(document.querySelector('li'));
console.log(document.querySelector('#id'))

querySelectorAll

通过选择器获取元素
语法:querySelectorAll("选择器")

返回匹配到的所有元素伪数组，里面是匹配的选择器;若匹配不到同上

console.log(document.querySelectorAll('#one'));
console.log(document.querySelectorAll('li'));
console.log(document.querySelectorAll('lilili'));

操作DOM属性(先获取才可使用)

<body>
  <div class = 'cls cls1' id="divId" num ='10' style="color: red;font-size:20px;"><p>are you ok?</p></div>
</body>

操作标签内容

.innerText 获取设置标签的文本(不能识别标签)
.innerHTML 获取设置标签的超文本(识别标签)

注意 : 设置是直接覆盖性的设置

var div = document.getElementsByTagName('div')[0];
console.log(div.innerText); 
div.innerText = 'thank you'; // thank you
div.innerText = '<i>thank you</i>'; // <i>thank you</i>

console.log(div.innerHTML); // <p>are you ok?</p>
div.innerHTML += '<i>thank you</i>';  //使用+=拼接原来的内容

操作标签属性

.getAttribute( 属性名 ); 获取标签属性
.setAttribute( 属性名,属性值 ); 设置标签和值

.removeAttribute( 属性名 ); 删除标签的属性

var div = document.getElementsByTagName('div')[0];
//获取标签属性
div.getAttritube("id")
 // 设置标签属性
div.setAttribute('index','666');
div.setAttribute('id','good');

  // 移除标签的属性
div.removeAttribute('num');
div.removeAttribute('id')

操作标签的行内式的css

.style 获取标签的所有css(包含全部的未设置css也会获得)

.style.样式获取设置标签的行内样式值

var div = document.getElementsByTagName('div')[0];
  // 获取标签的行内样式
console.log(div.style);//  对象(包含所有的css)
console.log(div.style.color);   //red
div.style.color = 'yellow';  // color:yellow
  // css中的样式名，如果是多个单词组成的，在js要使用小驼峰写法
div.style.fontSize = '50px'; // fontSize:50px;

操作设置标签的类名

.className 获取标签的类名

注意 : 设置是直接覆盖性的设置

var div = document.getElementsByTagName('div')[0];
  // 获取设置标签的类名
  // console.log(div.className); 
div.className = 'green';
div.className += ' green';   // 这是为了添加而不是直接覆盖掉原先存在的类名

DOM节点

DOM节点就是DOM中html的所有内容

常见节点的分类

文本节点 html中的文本内容和空格换行 innerText
元素节点标签 getElement...
属性节点标签中的属性 getAttribute

获取节点

  <p>我是p</p>
  文本文字
  <div  id="p1" class="cls1 cls2" index='12'>
    空格回车文字
    <p>我是p1标签</p> <p>我是p2标签</p><p>我是p3标签</p><!-- 注释 --></div>
    <span>我是span</span>

获取节点也需要先获取DOM

本小节使用
  var div = document.getElementsByTagName('div')[0];

childNodes

语法: div.childNodes 获取元素的所有子节点
返回值: 子节点的伪数组
```
console.log(div.childNodes);
```

children

语法: div.children 获取元素的所有子元素节点
```
console.log(div.children);
```

firstChild

语法: div.firstChild 获取元素的第一个子节点
```
console.log(div.firstChild);
```

lastChild

语法: div.lastChild 获取元素的最后一个子节点
```
console.log(div.lastChild);
```

fristElementChild

语法: div.fristElementChild 获取元素的第一个子元素节点
```
console.log(div.firstElementChild);
```

lastElementChild

语法: div.lastElementChild 获取元素的最后一个子元素节点
```
console.log(div.lastElementChild);
```

nextSibling

语法: div.nextSibling 获取元素的下一个兄弟节点
```
console.log(div.nextSibling);
```

previousSibling

语法: div.previousSibling 获取元素的上一个兄弟节点
```
console.log(div.previousSibling);
```

nextElementSibling

语法: div.nextElementSibling 获取元素的下一个元素兄弟节点
```
console.log(div.nextElementSibling);
```

previousElementSibling

语法: div.previousElementSibling 获取元素的上一个元素兄弟节点
```
console.log(div.previousElementSibling);
```

parentNode

语法: div.parentNode 获取元素的父级元素
```
console.log(div.parentNode);
```

Attribute

语法: div.attributes 获取元素的所有属性节点返回的是属性节点伪数组
```
console.log(div.attributes)
```

节点属性

nodeType

获取的节点类型是使用数字表示的;

console.log(eleNode.nodeType)  // (元素节点)1
console.log(attrNode.nodeType) // (属性节点)2
console.log(textNode.nodeType) // (文本节点)3
console.log(commentnode.nodeType)  //(注释节点)8

nodeName

获取节点的名称

console.log(eleNode.nodeName) // LI   (返回的都是大写的)
console.log(attrNode.nodeName) // test    (属性名)
console.log(textNode.nodeName) // #text    (#text)

nodeValue

获取节点的值

console.log(eleNode.nodeValue)     元素节点没有值输出null
console.log(attrNode.nodeValue)		属性节点输出属性值
console.log(textNode.nodeValue) 	文本节点输出文本内容(包括空格和回车)

操作节点

操作DOM节点，无外乎就是增删改查

createElement;

用于创建一个元素节点;

var oSpan = document.createElement("span")
console.log(oSpan)  //  <span></span>

createTextNode;

用于创建一个文本节点;

var oText = document.createTextNode("虾仁猪心")
console.log(oText)   // 输入文本的内容

appendChild( );

语法：元素A.appendChild(节点B)

将节点B追加到元素A里面的后面

var oText = document.createTextNode("虾仁猪心")
document.body.appendChild(oText);  //

insertBefore( );

语法 : 元素A.insertBefore(节点B,元素C)

将节点B添加到元素A里面的元素C的前面

var oEle = document.createElement("div")
var oSpan = document.querySelector("span")
var d = document.body.insertBefore(oEle,oSpan)
console.log(d)

removeChild( );

语法 : 元素A.removeChild(节点B);

将元素A中的节点B删除

var oEle = document.createElement("div")
var oSpan = document.querySelector("span")
var del = document.body.removeChild(oSpan);

replaceChild( );

语法 : 元素A.replaceChild(节点B,节点C);

使用节点B替换掉元素A中的节点C;

var oEle = document.createElement("div")
var oSpan = document.querySelector("span")
var d = document.body.replaceChild(oEle,oSpan)

cloneNode( );

语法: 元素A.cloneNode(参数);
参数默认是布尔值false ,如果是true则克隆子元素

返回值：克隆复制的元素

var oEle = document.createElement("div")

var oSpan = document.querySelector("span")
var clo = oSpan.cloneNode(true);
console.log(clo)

获取全局的css样式(存在兼容)

getComputedStyle( ) 全能获取型

语法 : window.getComputedStyle(元素,参数).样式名

参数:

null 空着不写就代表空
before/after 可以获取元素伪类的样式

console.log(window.getComputedStyle(div).width);
console.log(window.getComputedStyle(div,null).border);

curentStyle( )

语法 : 元素.currentStyle.样式

var oDiv = document.querySelector('div');
console.log(oDiv.currentStyle.width);

获取元素的尺寸

获取元素的偏移量

offsetLeft offsetTop

确认有没有定位属性
1. 如果元素没有定位。则获取的是相对于页面的左上角
2. 如果元素有定位，则获取的是相对父元素左上角的定位
```
var oDiv = document.querySelector('#dv');
console.log(oDiv.offsetLeft);
console.log(oDiv.offsetTop);
```

offsetWidth offsetHeight

获取元素 内容宽高 + padding宽高 + border宽高 的和

获取浏览器的宽高

document.body.offsetWidth;

获取浏览器的宽高一般使用另一种方法;

document.documentElement.clienWidth/clienHight;

有一点菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM(文档对象模型)

DOM DOM ==> Document Object Model (文档对象模型) document 是DOM中的顶级对象其上一级是window对象要操作页面的中标签元素，我们要先获取到标签元素小知识:什么是伪数组伪数组和数组一样都有索引下标和length属性表示长度但是伪数组不能使用数组方法(数组.forEach/数组.map) 获取DOM方法getElementById 通过id获取 id的element后面是没有s的
复制链接

扫一扫