JS关于DOM

最新推荐文章于 2024-10-07 09:24:46 发布

非常规程序媛

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量135

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_39344725/article/details/105901830

版权

Node类型

DOM1级定义了一个Node接口，javascript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法，其中每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12数值常量表示，任何节点类型必居其一
Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT__FRAMENT_NODE:11
Node.NOTATION_NODE:12
任何节点都将属于其中一种类型
例如

if(someNode.nodeType == Node.ELEMENT_NODE){
    alert("这个节点是个标签")
    //其中也可以不使用Node.ELEMENT_NODE每个节点都有数字
}

nodeName和nodeValue

对于元素的节点来说，nodeName中永远保存的是元素的标签名字，而nodeValue中保存的是null

childNodes和parentNode

每个节点都有一个childNodes的属性，其中保存的是NodeList对象，NodeList是一种类数组对象，可以通过位置来访问节点，而且这个对象也有length属性，但是并不是一个Array实例，NodeList对象是基于DOM结构动态执行查询的结果
例子

// 这是一种取出来的方式使用方括号
var firstchild = someNode.childNodes[0]
// 这也是一种取出来的方式使用item
var secondChild = someNode.childNodes.item(1)
// 这是查看长度的方式
var count = someNode.childNodes.length

每个节点都有一个parentNode的属性，该属性指向文档树中的父节点，而且包含在childNodes列表中的每个节点都是同胞节点，该列表中的每个节点都有previousSibling和nextSibling属性，表示前一个节点和后一个节点，并且可以用来确认列表中的第一个节点和最后一个节点，其中第一个节点的前一个节点为null，最后一个节点的后一个节点为null，如果该列表中只有一个节点那么前一个和后一个都为null

hasChildNodes()

这个方法是该节点若包含一个子节点或者多个子节点的情况下会返回true

appendChild(）

我们可以使用这个方法来像childNodes列表末尾来添加一个节点，
如果你传入的节点已经是列表中的某一个节点，那么它将从列表中原来的位置变为最末尾的位置
总结：也就是说这个方法只能将元素放在末尾

var returnNode = someNode.appendChild(newNode)

insertBefore（）

这个方法接受两个参数，要插入的节点和作为参照的节点，要插入的节点会变成参照节点的前一个节点
注意：如果被参照节点为null的话，那么将被插入的节点插入到末尾

var returnNode = someNode.insertBefore(newNode,firstChild)
//返回值为被插入的节点

replaceChild（）

这个方法接受两个参数，新插入的节点，和被替换的节点，被替换的这个节点将从文档树中被移除

var returnNode = someNode.repalceChild(newNode,firstChild)
//返回值为被移除的节点

removeChild（）

这个方法只接受一个参数，那就是你想要移除的节点

cloneNode（）

这个方法接受一个参数，这个参数为true或者false，如果为true的时候贼执行深复制，如果为false的时候则执行浅复制

Document类型

其中有几个常见的引用
var html = document.documentElement
var body = document.body
var doctype = document.doctype
var title = document.title

getElementById()

这个方法只有一个参数，里面是单引号或者双引号然后放入你想要获取的元素的id名称

 var ul = document.getElementById('ul')

getElementByTagName（）

这个方法里面接受一个参数，就是你想要获取元素的标签，但是这个获取到的是一个类似于NodeList的对象叫做HTMLCollection

<body id="body">
    <img src="" alt="" name="myImage">
    <script>
        var image = document.getElementsByTagName('img')
        image[0]
        image.item(0)
        // 这个方法是namedItem可以根据name属性来获取列表中的元素
        image.namedItem("myImage")
        image['myImage']
    </script>
</body>

注意：当你想获得页面上的所有元素的时候可以采取下列方法

var allElements = document.getElementsByTagName("*")

getElementsByname（）

这个方法支持一个参数，用双引号或者单引号包裹，可以取得所有name名字相同的元素的集合，注意该标签必须支持name属性

var radios = document.getElementsByName("color")

getAttribute（）

这个方法接受一个参数，使用双引号或者单引号进行包裹，参数为元素的某一个属性

var div  = document.getElementById("myDiv")
alert(div.getAttribute("id")
//得到的就是id的value值，并且也可以获取自定义的属性的值

开发人员一般不使用这个方法，而是都采用 . 的方式来获取到属性
例如

alert(div.id)

setAttribute（）

这个方法接受两个参数，第一个参数为要设置的属性，第二个参数为属性的value，两个参数都使用双引号进行包裹

div.setAttribute("id","someOtherId")

removeAttribute()

这个方法接受一个参数，并使用双引号或者单引号进行包裹，用于彻底删除元素的特性，调用这个方法不仅会清除特性的值，而且会从元素中完全删除特性

div.removeAttribute("class")

这个方法不常用

createElement（）

这个方法接受一位参数，使用双引号或者单引号进行包裹，用于来创造一个新的标签

 var li = document.createElement("li")

这个方法还可以手动创建完整的标签

var div = document.createElement（“<div id = \"myid\” class="\box\"></div>）

querySelector()

这个方法的参数是一个css的选择符，使用双引号或者单引号进行包裹

        // 取到标签为body的元素
        var body  = document.querySelector("body")
        // 取到id为myDiv的元素
        var body  = document.querySelector("#myDiv")
        // 取到第一个类名叫做selected的元素
        var body  = document.querySelector(".selected")

querySelectorAll()

这个方法与上个方法的使用方法是相同的，但是获取到的是一个数组

getElementsByClassName（）

这个方法接收一个参数，使用双引号或者单引号进行包裹，返回的值也是一个数组

var selected = document.getElementsByClassName("selected")

classList属性

其中有一些方法

add（value）：将给定的字符串值添加到列表中，如果已经存在则不添加
contains（value）：表示列表中是否存在给定的值，如果存在则返回true，不存在则返回false
remove（value）：从列表中删除给定的字符串
toggle（value）：如果列表中已存在给定的值，删除它，如果列表中没有给定她的值，添加它

        // 删除disable类
        div.classList.remove("disable")
        // 添加disable类
        div.classList.add("disable")
        //切换disable类
        div.classList.toggle("disable")

注意：这个属性只在火狐浏览器和谷歌浏览器中生效