DOM 文档对象模型
js操作HTML文档的api 1998年10月
IE中的dom对象是以com对象的形式实现的
实例化
1.通过dom拿到我们想要的节点
var myDiv=document.getElementById("myDiv");
console.log(myDiv);
2.通过dom创建节点
//创建一个lt节点
var node =document.createElement("lt");
//创建text节点
var txetNode=document.createTextNode("hello");
//将text节点添加到lt节点上
node.appendChild(txetNode);
//
document.getElementById("myDiv")
document类型
表示整个HTML文档 document
属性:body 指向body元素
head 获取HTML头部
title 获取文档标题
doctype 获取<!document> 很少用
url 获取完整的URL
domain 获取域名
referrer 获取链接到当前页面的那个页面的url
images 获取页面所有的img对象 返回值:HTMLcollection
forms 获取所有的form对象 返回值:HTMLcollection
links 获取文档中带有href属性的a元素
方法 getElementById()//通过元素的id获取元素节点
调用者:document
参数:想要获取的元素id
返回值:找到的第一个元素,如果没有返回null
getElementClassName(“app app1”)//通过元素的类名获取元素节点
调用者:document
参数:为一个字符串,表示元素的类名 可以用空格隔开
返回值: HTMLcollection list包含一个或多个元素 可以使用数组的操作方式去处理结果
getElementByTagName(“”)
作用: 通过元素的标签名找到节点
调用者:document
参数:为一个字符串,表示元素的元素名(标签)
返回值:HTMLcollection list 包含一个或多个元素 可以使用数组的操作方式去处理结果
getElementByName(“”)
作用: 通过元素的名找到节点
调用者:document
参数:为一个字符串,表示元素的名()
返回值:Nodelist list 包含一个或多个元素 可以使用数组的操作方式去处理结果
Element类型
属性
id 元素在文档中的唯一标志符
className 与元素的class特性相对应 可以重复 可以有多个 用空格分隔
title 与元素相关的附加信息
src
alt
自定义属性
设置属性
node.className="two";//设置类名
node.setAttribute("className","three");//第二种
获取属性
node.getAttribute("class")
node.setAtt
setAttribute();
作用:给获取到的元素设置属性
调用者: 要设置属性的元素
参数:两个参数 属性名 对应的值
返回值:对应的属性值
注意点:要设置的值存在的话,修改原来的值,不存在就添加
getAttribute();
作用:给获取到的元素设置属性
调用者: 元素
参数:属性名
返回值:对应的属性值
移除属性
removeAttribute()
作用:给获取到的元素移除属性
调用者: 元素
参数: 属性名
返回值:对应的属性值
创建元素
createElement
作用:创建一个dom节点
调用者:document
参数:一个参数,要创建元素的标签名在html中不区分大小写,
在xml中区分
返回值:
var node = document.createElement("LI");
// 创建一个text节点
var textNode = document.createTextNode("Hello");
// 将text节点追加到li节点上
node.appendChild(textNode);
firstElementChild 某个节点的第一个孩子节点
lastElementChild 某个节点的最后一个孩子节点
nextElementSibling 某个节点的下一个兄弟节点
previousElementSibling 某个节点的上一个兄弟节点
childElementcount:该节点子元素数 子元素的数量,返回值和children.length值相等
innerHtml:该元素内容
textContent:该元素内部的文本
text类型
属性
length 文本长度
appendData
作用:给文本节点 添加节点
调用者:文本节点
参数:要添加的文本内容
deleteData();
作用:删除文本
调用者:文本节点
参数:两个参数 开始的位置 要剩余的数量
var textNode = document.createTextNode("hello,");
textNode.appendData("world");
deleteData(0, 2);
insertData();
作用:插入文本
调用者:文本节点
参数:两个参数 开始的位置 要插入的文本
var textNode = document.createTextNode("hello,");
textNode.insertData(6, "world!")
replaceData();
作用:替换文本
调用者:文本节点
参数:三个参数 开始的位置 要替换的文本长度 替换的文本
var textNode = document.createTextNode("hello,");
textNode.replaceData(0, 2, "-"); // "-llo,"
splitText();
作用:将一个文本节点分割成两个
调用者:文本节点
参数:一个 分割点的位置
返回值:分割好的后面的文本节点
var textNode = document.createTextNode("helloworld");
console.log(textNode); // "hello"
console.log(textNode.splitText(5)); // "world"
substringData();
作用:提取文档节点中的字符串
调用者:文本节点
参数: 两个参数 开始的位置 要提取的文本个数
返回值: 提取出来的字符串
注意点:不改变原文本
var textNode = document.createTextNode("helloworld");
console.log(textNode.substringData(0, 5)); // hello
console.log(textNode); // "helloworld"
createElementData();
作用:创建一个文本节点
调用者:文本内容
参数:
返回值:
注意点: var textNode = document.createTextNode("helloworld");
comment类型
注释
创建:createComment();
作用:创建注释节点
const comment = document.createComment('注释')
document.body.appen(commnet)
DOM初用
最新推荐文章于 2023-02-19 12:58:34 发布