document 常用属性方法总结

xiyang#

于 2024-04-10 09:00:00 发布

阅读量1.2k

点赞数 54

分类专栏： JavaScript常用方法总结文章标签：前端 JavaScript html5

本文链接：https://blog.csdn.net/g841805/article/details/137556477

版权

JavaScript常用方法总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

attrbute
1. nodeName
  1. 定义：nodeName属性返回节点的名称
  2. 使用
```
console.log(div1.nodeName)
```
2. nodeValue
  1. 定义：nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值.
  2. 使用
```
console.log(div1.childNodes[1].nodeValue)
```
3. textContent
  1. 定义：textContent属性返回当前节点和它的所有后代节点的文本内容
  2. 使用
```
console.log(div1.textContent)
```
4. nextSibling
  1. 定义：nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null
  2. 使用
```
console.log(div1.firstChild.nextSibling)
```
5. previousSibling
  1. 定义：previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null
  2. 使用
```
console.log(div1.lastChild.previousSibling)
```
6. parentNode
  1. 定义：parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点(element)、文档节点(document)和文档片段节点(documentfragment)
  2. 使用
```
console.log(div1.parentNode)
```
7. parentElement
  1. 定义：parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null
  2. 使用
```
console.log(div1.parentElement)  
```
8. firstChild和lastChild
  1. 定义：firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。
  2. 使用
```
console.log("div1.firstChild:",div1.firstChild)
console.log("div1.lastChild:",div1.lastChild)
```
9. childNodes
  1. 定义：childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点
  2. 使用
```
console.log("div1.childNodes:",div1.childNodes)
```
10. classList
  1. 定义:返回该元素包含的 class 属性的集合。
  2. 使用
```
console.log("div1.classList:",div1.classList)
```
  3. ```
  console.log("div1.classList:",div1.classList)
```
11. className
  1. 定义:获取或设置指定元素的 class 属性的值。
  2. 使用
```
div1.classList.add('class1')
div1.classList.add('class2')

console.log(div1.className)
```
12. clientHeight
  1. 定义:获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
  2. 使用
```
console.log("div1.clientHeight:",div1.clientHeight)
console.log("div1.clientWidth:",div1.clientWidth)
console.log("div1.clientLeft:",div1.clientLeft)
console.log("div1.clientTop:",div1.clientTop)
```
13. clientTop
  1. 定义:返回该元素距离它上边界的高度。
  2. 使用
14. clientLeft
  1. 定义:返回该元素距离它左边界的宽度。
  2. 使用
15. clientWidth
  1. 定义:返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
  2. 使用
16. tagName
  1. 定义:返回当前元素的标签名。
  2. 使用
```
console.log(div1.tagName)
```
17. body
  1. 定义:直接指向<body>元素
  2. 使用
```
console.log(document.body)
```
18. title
  1. 定义:获取文档的标题
  2. 使用
```
console.log(document.title)
```
19. URL
  1. 定义:取得完整的URL
  2. 使用
```
console.log(document.URL)
```
20. domain
  1. 定义:取得域名，并且可以进行设置，在跨域访问中经常会用到。
  2. 使用
```
console.log(document.domain)
```
21. referrer
  1. 定义:取得链接到当前页面的那个页面的URL，即来源页面的URL。
  2. 使用
```
console.log(document.referrer)
```
22. images
  1. 定义:获取所有的img对象，返回HTMLCollection类数组对象
  2. 使用
```
console.log(document.images)
```
23. forms
  1. 定义:获取所有的form对象，返回HTMLCollection类数组对象
  2. 使用
```
console.log(document.forms)
```
24. links
  1. 定义:获取文档中所有带href属性的<a>元素
  2. 使用
```
console.log(document.links)
```
25. innerHTML
  1. 定义:设置或获取 HTML 语法表示的元素的后代。
  2. 使用
```
div1.innerHTML = '创建一个div'
```
26. attribute
  1. 定义:修改属性的值
  2. 使用
27. element.style.property = new Style
  1. 定义:改变 HTML 元素的样式
  2. 使用
```
div1.style.border = 'solid 1px black'
```
28. attributes
  1. 定义:返回一个与该元素相关的所有属性的集合
  2. 使用
```
console.log(div1.attributes)
```
function
1. appendChild
  1. 定义：在 childNodes 列表末尾添加节点
  2. 使用
```
document.body.appendChild(div1)
```
2. insertBefore
  1. 定义：将某个节点插入父节点内部的指定位置。
  2. 使用
```
document.body.insertBefore(p1,div1)  //第一个参数是新添加的元素,第二个是在这个元素前插入
```
3. insertAdjacentHTML
  1. 定义:insertAdjacentHTML() 方法是将文本解析为 element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。
  2. 使用
```
div1.insertAdjacentElement('beforebegin',p2) //第一个参数是位置 第二个参数是新插入的元素
div1.insertAdjacentElement('afterbegin',p3)
div1.insertAdjacentElement('beforeend',p4)
div1.insertAdjacentElement('afterend',p5)
```
4. removeChild
  1. 定义：removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
  2. 使用
```
div1.removeChild(p4)
```
5. replaceChild
  1. 定义：将一个新的节点，替换当前节点的某一个子节点。
  2. 使用
```
div1.replaceChild(p7,p6) //第一个参数是用于替换的,第二个是被替换的
```
6. cloneNode
  1. 定义：返回调用该方法的节点的一个副本，如果为true，则采用深度克隆,,该节点的所有后代节点都会被克隆,如果为false,则只克隆该节点本身。
  2. 使用
```
let p6 = p5.cloneNode('deep')
```
7. getElemenById
  1. 定义：使用元素的 id获取HTML元素
  2. 使用
```
console.log(document.getElementById('p6'))
```
8. getElementsByTagName
  1. 定义：通过标签名来查找元素
  2. 使用
```
console.log(document.getElementsByTagName('div'))
```
9. getElementsByClassName
  1. 定义：通过类名来查找元素
  2. 使用
```
console.log(document.getElementsByClassName('p6class'))
```
10. querySelector
  1. 定义：返回文档中匹配指定的CSS选择器的第一元素
  2. 使用
```
console.log(document.querySelector('#p6'))
```
11. querySelectorAll
  1. 定义：document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
  2. 使用
```
console.log(document.querySelectorAll('.p6class'))
```
12. element.getAttribute(key)
  1. 定义:返回元素节点的指定属性值。
  2. 使用
```
console.log(p6.getAttribute('id'))
```
13. element.setAttribute(key,value)
  1. 定义:设置或改变 HTML 元素的属性值
  2. 使用
```
console.log(p6.getAttribute('id'))
p6.setAttribute('id','p6new')
console.log(p6.getAttribute('id'))
```
14. createElement
  1. 定义：创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
  2. 使用
```
let div1 = document.createElement('div')
```
15. write
  1. 定义:向文档写入文本或 HTML 表达式或 JavaScript 代码。
  2. 使用
```
document.write(str)
```
16. classList.funtction
  1. add():删除元素的一个或多个类名;
  2. remove():向元素添加一个或多个类名;
  3. toggle():元素切换类,将它放在点击事件中若检测到没有的类就添加，若检测到有c的类就删除
  4. ```
  console.log("div1.classList:",div1.classList)
  div1.classList.add('class1')
  div1.classList.add('class2')
  console.log("div1.classList:",div1.classList)
  div1.classList.remove('class2')
  console.log("div1.classList:",div1.classList)
  div1.classList.toggle('class1')
  console.log("div1.classList:",div1.classList)
```

PS:部分代码

let div1 = document.createElement('div')
div1.innerHTML = '创建一个div1'
document.body.appendChild(div1)
let p1 = document.createElement('p')
p1.innerHTML = '创建一个p1'
document.body.insertBefore(p1,div1)  //第一个参数是新添加的元素,第二个是在这个元素前插入
let p2 = document.createElement('p')
p2.innerHTML = '创建一个p2'
let p3 = document.createElement('p')
p3.innerHTML = '创建一个p3'
let p4 = document.createElement('p')
p4.innerHTML = '创建一个p4'
let p5 = document.createElement('p')
p5.innerHTML = '创建一个p5'
div1.insertAdjacentElement('beforebegin',p2)
div1.insertAdjacentElement('afterbegin',p3)
div1.insertAdjacentElement('beforeend',p4)
div1.insertAdjacentElement('afterend',p5)
div1.style.border = 'solid 1px black'
div1.removeChild(p4)
let p6 = p5.cloneNode('deep')
div1.appendChild(p6)
p6.id = 'p6'
p6.className = 'p6class'
p6.setAttribute('id','p6new')
let p7 = document.createElement('p')
p7.innerHTML = '创建一个p7'
div1.replaceChild(p7,p6) //第一个参数是用于替换的,第二个是被替换的
// console.log(div1.nodeName)
// console.log(div1.textContent)
// console.log(div1.firstChild.nextSibling)
// console.log(div1.parentNode)
// console.log(div1.parentElement)  
// console.log("div1.firstChild:",div1.firstChild)
// console.log("div1.lastChild:",div1.lastChild)
// console.log("div1.childNodes:",div1.childNodes)
// console.log("div1.classList:",div1.classList)
// div1.classList.add('class1')
// div1.classList.add('class2')
// console.log("div1.classList:",div1.classList)
// div1.classList.remove('class2')
// console.log("div1.classList:",div1.classList)
// div1.classList.toggle('class1')
// console.log("div1.classList:",div1.classList)
// console.log(div1.className)
// console.log("div1.clientHeight:",div1.clientHeight)
// console.log("div1.clientWidth:",div1.clientWidth)
// console.log("div1.clientLeft:",div1.clientLeft)
// console.log("div1.clientTop:",div1.clientTop)
console.log(div1.tagName)