DOM学习笔记

最新推荐文章于 2022-11-13 17:50:34 发布

qq_37717458

最新推荐文章于 2022-11-13 17:50:34 发布

阅读量161

点赞数

分类专栏：学习笔记文章标签： javascript DOM

本文链接：https://blog.csdn.net/qq_37717458/article/details/88775256

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Node类型

nodeType属性

Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
Node.TEXT_NODE
…有12个这样的类型，每个类型对应一个数值

if (someNode.nodeType == Node.ELEMENT_NODE){
  console.log("Node is an element")
} 
//等价
if (someNode.nodeType == 1){
  console.log("Node is an element")
}

nodeName和nodeValue属性

用于了解节点的具体信息

节点属性

节点属性名称	属性用途
childNodes	访问一个NodeList对象
nextSibling	前一个兄弟节点
previousSibling	后一个兄弟节点
firstChild	第一个子节点
lastChild	最后一个子节点
ownerDocument	该属性指向整个文档的文档节点

childNodes属性

访问一个NodeList对象，

let firstNode = someNode.childNodes[0];
let secondNode = someNode.childNodes.item(1)
let arrayofNodes = Array.prototype.slice.call(someNode.childNodes, 0)//将NodeList对象转换成数组

hasChildNodes()

该方法用于节点包含一个或多个节点返回true

操作节点

操作节点的方法	说明
appendChild()	该方法用于向childNodes列表的末尾添加一个节点
insertBefore()	用于插入一个节点，接受两个参数，要插入的节点和作为参照的节点
replaceChild()	用于替换一个节点，接受两个参数，要插入的节点和要被替换的节点
removeChild()	用于删除一个节点
cloneNode()	用于克隆节点，传入一个布尔参数，为true是深复制

Document类型

部分属性表

属性	作用
documentElement	取得对html的引用
body	取得对body节点的引用
doctype	取得对DOCTYPE节点的引用
title	取得文档标题
URL	取得完整的URL
domain	取得完整的域名
forms	返回文档中的所有form元素
images	返回文档中的所有img元素
links	返回文档中的所有href 元素

查找元素

方法	用法
getElementById()	接受一个ID，返回该ID对应的节点
getElementsByTagName()	接受元素的标签名，返回包含零个或多个的NodeList
getElementsByName()	返回给定name特性的所有元素

DOM一致性检验

document.implementation.hasFeature(),接受两个参数，DOM功能的名称和版本号

文档写入

write(),writeln(),open(),close()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> document.write()</title>
</head>
<body>
<p>
  the current date and time is:
  <script type="text/javascript">
    document.write("<strong>" + (new Date()).toString() + "</strong>");
  </script>
</p>

</body>
</html>

显示结果：the current date and time is: Sun Mar 24 2019 14:52:00 GMT+0800 (中国标准时间)

Element类型

Element的属性

属性名	含义
id	元素在文档中的唯一标识符
title	标题
lang	元素内容的语言代码
dir	语言的方向（ltr 左到右，rtl 右到左）
className	和class对应

Element的特性

方法	作用
getAttribute()	div.getAttribute(“class”)获取指定节点的指定属性
setAttribute()	div.setAttribute(“class”, “ft”)设定指定节点的指定属性
removeAttribute()	div.removeAttribute(“class”)移除指定节点的指定属性

attributes属性

Element的attributes属性会返回一个集合了该元素所有属性的对象

属性方法	用法
getNamedItem	获取指定参数的nodeValue
removeNamedItem	移除指定参数
setNameItem	设置指定参数
item(pos)	返回指定pos位置的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> document.write()</title>
</head>
<body>
<p>
  the current date and time is:
  <script type="text/javascript">
    let div = document.createElement('div')
    div.setAttribute("class", "ft");
    let class1 = div.attributes.getNamedItem("class").nodeValue
    let class2 = div.attributes["class"].nodeValue//class1 等价于class2
    div.attributes.removeNamedItem("class")
  </script>
</p>
</body>
</html>

创建要素

使用document.createElement可以创建元素
用法

let div = document.createElement('div')
let radio = document.createElement("<input type=\"radio\" name=\"choice\" "+ "value=\"1\">")

DOM扩展

querySelectorAll()和querySelector()方法

通过接收CSS选择符，返回与该模式匹配的元素

let body = document.querySelector("body")
let selected = document.querySelector("img.button")
let selecteds = document.querySelectorAll(".selected")

getElementByClassName()方法

//取得所有类名为username或者current的元素
document.getElementsByClassName("username current")
document.getElementById("mydiv").getElementsByClassName("selected")

classList属性

该属性返回的可以看成是className的数组，是新集合类型DOMTokenList的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> document.write()</title>
</head>
<body class="bd user disabled">
<p>
  the current date and time is:
  <script type="text/javascript">
    //删除user类
    let classNames = document.body.className.split(/\s+/);
    let pos = -1;
    for (let i=0, len = classNames.length; i<len; i++) {
      if (classNames[i] == "user"){
        pos = i;
        break;
      }
    }
    classNames.splice(i, 1);
    document.body.className = classNames.join(" ");
  </script>
</p>
</body>
</html>

如此操作十分复杂，有了classList属性

document.body.classList.remove("user)

四种方法

add()将给定的字符串添加到列表中
contains(value)表示列表中是否存在value，如果存在返回true
remove(value)删除给定value
toggle(value)如果存在value，删除之；不存在，添加之

焦点管理

document.activeElement属性会获取当前获得了焦点的元素
document.hasFocus()方法用于确定文档是否获得了焦点

Document新增属性

属性	作用及用法
readyState	document.readyState有两种可能的值，一种为loading（正在加载文档）,另一种为complete（文档加载完成）
head	引用文档的<head>元素
charset	引用文档的字符集

插入标记

innerHTML属性

在读模式，返回调用元素的所有子节点对应的HTML，在写模式，替换调用元素下所有的子节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> document.write()</title>
</head>
<body class="bd user disabled">
<p>
  the current date and time is:
  <script type="text/javascript">
    console.log(document.body.innerHTML)
  </script>
</p>
</body>
</html>

写模式下如果没有HTML标签，那么结果设置为纯文本；

outerHTML属性

在读模式，返回调用元素的所有子节点和调用元素对应的HTML，在写模式，替换调用元素下所有的子节点和调用元素。

div.outerHTML = '<p>This is a paragraph.</p>'
//等价于下面的代码
let p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph"));
div.parentElement.replaceChild(p, div)

insertAdjacentHTML

第一个传入的参数是指定的，不同的指定参数指定插入不同的位置

参数	作用
beforebegin	在当前元素前插入一个紧邻的同辈元素
afterbegin	在当前元素之下插入一个新的子元素或在第一个子元素之前再插新的子元素
beforeend	在当前元素之下插入一个新的子元素或在最后一个子元素之后再插新的子元素
afterend	在当前元素之后插入一个紧邻的同辈元素

scrollIntoView

可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口。

样式

html中定义样式有三种方法

<link/>元素包含外部样式表文件
通过<style/>元素定义嵌入式样式
使用style特性定义针对特定元素的样式
下面的代码实现的是style属性对样式的控制

let myDIv = document.getElementById("mydiv")
    myDIv.style.backgroundColor = 'red'
    myDIv.style.width = "100px"
    myDIv.style.height = "200px"
    myDIv.style.border = "1px solid black"

属性和方法	作用
cssText	能够访问style特性的CSS代码
length	应用给元素的CSS属性的数量
parentRule	表示CSSRule对象
getPropertyCSSValue	返回给定属性值的CSSValue
getPropertyValue	返回给定属性的字符串值
getPropertyPriority	如果给定的属性使用了！important设置，则返回important，否则返回空字符串
item(index)	返回给定位置的CSS属性的名称
removeProperty	从样式中删除指定属性
setProperty	将给定属性设置为相应的值，并加上优先权标志

qq_37717458

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM学习笔记

DOM介绍Node类型nodeType属性nodeName和nodeValue属性节点属性childNodes属性hasChildNodes()操作节点Document类型部分属性表查找元素Node类型nodeType属性Node.ELEMENT_NODENode.ATTRIBUTE_NODENode.TEXT_NODE…有12个这样的类型，每个类型对应一个数值if (someNod...
复制链接

扫一扫