首页 > 其他分享 >document 常用属性方法总结

document 常用属性方法总结

时间：2024-04-11 12:59:15浏览次数：11  
标签：总结 console log classList document 节点 div1 属性

  1. 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)

  2. 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)

  3. 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)

标签：总结,console,log,classList,document,节点,div1,属性
From： https://blog.csdn.net/g841805/article/details/137556477

相关文章

  • Typescript 详细总结1
    基本数据类型类型注释:numberlet num:number=5//数字类型let str:string='str'//字符串类型let boolen:boolean =true//布尔 类型断言，确定类型后，不能赋其他类型值any类型let  anything:any='ssssss'let  anything:any=223any类型......
  • WPF的TextTrimming的属性
    WPF的TextTrimming="CharacterEllipsis"是一种文本修剪方式，用于在文本长度超过容器宽度时省略文本。它会在文本末尾添加省略号(...)，同时保留尽可能多的字符。这种修剪方式通常用于UI设计中，以避免文本溢出并保持视觉美观。可以通过设置TextTrimming属性来指定文本的截断方式：Tex......
  • localStorage使用总结
    一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同......
  • label的for属性
    一、使用介绍<label>专为input元素服务，为其定义标记。for属性规定label与哪个表单元素绑定label和表单控件绑定方式又两种：1、将表单控件作为label的内容，这样就是隐士绑定。此时不需要for属性，绑定的控件也不需要id属性。12隐式绑定：<label>DateofBirth:<input typ......
  • 2024-04-11 记录日常业务之遍历对象并删除不符合条件的属性
    为什么要记录，因为很少遇到这种奇葩的需求，后端要我不要返回对象中所有值为-1的字段，我就纳了闷了，你就不能自己处理吗？？好了，不吐槽了，主要是较少去处理遍历对象的操作（历来都是遍历数组），所以在这里做个记录：letparams={ a:10, b:6, c:-1, d:11, e:19, f:-1,......
  • 软工第二次任务-工作总结
    引言：在软件开发的广阔天地中，单元测试是确保代码质量和功能正确性的关键步骤。它不仅有助于及时发现和修复缺陷，还能提高开发效率，减少后期维护成本。本次任务旨在对软件工程中的单元测试进行全面的总结，以期为未来的开发工作提供宝贵的经验和参考。一、单元测试的重要性单元测试，顾......
  • Linux开发、运维常用命令个人心得总结
    1、lsls是“list”的缩写，。它是Linux系统中用于列出目录内容的标准命令。默认情况下，它会以简单的方式显示文件和目录的列表。-l：长格式显示。-a：显示所有文件，包括隐藏文件。2、cd用于改变当前工作目录的命令,cd命令后面通常跟着要切换到的目录的路径。cd..：返回上一级......
  • 多种数据库存储过程数据插入方法总结
    多种数据库存储过程数据插入方法总结ORACLE-DM-OSCARCREATETABLEzhaobsh1m(IDvarchar(1024),NAME1varchar(1024),NAME2varchar2(1024),NAME3varchar2(1024));selectsegment_name--表名,bytes/1024/1024/1024as空间大小GBfromuser_segmentswheresegment_type......
  • 工作总结
    工作总结：C语言语句覆盖自动测试一、引言本次工作总结将回顾我们近期在C语言语句覆盖自动测试方面所取得的进展和成果。通过实施自动化测试策略，我们成功地对C语言程序进行了全面而系统的语句覆盖测试，有效提高了代码的质量和可靠性。二、测试准备与规划深入分析C语言程序在开始......
  • 工作总结
    C语言代码语句覆盖测试工作总结一、引言本次测试工作的主要目标是确保C语言代码中的每一个语句都至少被执行一次，即实现语句覆盖。通过语句覆盖测试，我们可以确保代码的基本逻辑路径已经被测试覆盖，从而提高代码的质量和可靠性。二、测试方法代码分析：首先，我们对C语言代码进行了详......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99