0
点赞
收藏
分享

微信扫一扫

JavaScript的DOM

莞尔小迷糊 2022-04-27 阅读 54
javascript

JavaScript的DOM

1.DOM(文档对象模型)

  • 当网页被加载时，浏览器会创建DOM，DOM属于BOM的一部分，对document的操作。
  • HTML DOM被构造为对象的树。 DOM树。
  • DOM树包含 HTML元素，HTML文本，HTML属性。
  • JavaScript通过DOM可以改变HTML元素，HTML文本，HTML属性(CSS样式)，事件做出反应

2.DOM是什么？

  • 文档对象模型，是HTML文档的编程接口
  • 当网页被加载时，浏览器会创建页面的文档对象模型

3.DOM做什么？

  • JavaScript可以改变页面中所有HTML元素（内容）
  • JavaScript可以改变页面中所有的HTML属性
  • JavaScript可以改变页面中所有的CSS样式
  • JavaScript对页面中的所有事件做出反应

通过DOM获取元素getElement

1.通过id获取元素 唯一 getElementById(“id名”)

<ul>
    <li class="item">列表01</li>
    <li class="item">列表02</li>
    <li>列表03</li>
    <li>列表04</li>
</ul>
<p class="text">这是一个段落</p>
<form action="">
    <input type="radio" name="sex">男 
    <br>通过
    <input type="radio" name="sex">女
</form>

var oHeader=document.getElementById("header");
    console.log(oHeader);//<h1 id="header">通过DOM获取元素</h1>

2.通过class获取一个或多个元素 getElementsByClassName(“class名”)

    var aItem=document.getElementsByClassName("item");
    console.log(aItem);//HTMLCollection(2) [li.item, li.item]
    aItem[0].onmouseover=function(){
        alert(this.innerText);
    }
    
    var aText1=document.getElementsByClassName("text");
    console.log(aText1);//HTMLCollection [p.text]
    
    var oText1=document.getElementsByClassName("text")[0];
    console.log(oText1);//<p class="text">这是一个段落</p>

HTMLCollection 集合,类似于数组(伪数组)

3.通过标签名获取元素 一个或多个 getElementsByTagName

var aItem = document.getElementsByTagName("p");
    console.log(aItem);

4.通过 name 获取元素 主要用于form表单 getElementsByName(“name名”)

var aRadio=document.getElementsByName("sex");
    console.log(aRadio);//NodeList(2) [input, input]
    aRadio[0].onchange=function(){
        alert(this.value);
    }

5.getElementsByTagNameNS() 获取多种元素

console.log(document.getElementsByTagNameNS("p","span"));

6.获取根节点 getRootNode()

console.log(document.getRootNode());

7.通过元素可以获取元素

var oWrap=document.getElementById("wrap");
    console.log(oWrap);
    
    // 不能通过元素去获取通过id获取的元素
    console.log(oWrap.getElementsByClassName("text"));

通过DOM获取元素querySelector

1.通过选择器的方式 querySelector() 获取到一个元素

// 获取元素   选择器  只获取第一个元素
    var oText2=document.querySelector(".text");
    console.log(oText2);
    
    var oHeader1=document.querySelector("#header");
    console.log(oHeader1);
    
    var oLi1=document.querySelector("li");
    console.log(oLi1);

2.querySelectorAll() 获取多个

var aLi1=document.querySelectorAll("li");
    console.log(aLi1);//NodeList(4) [li.item, li.item, li, li]

var aText3=document.querySelectorAll(".text");
    console.log(aText3);//NodeList [p.text]
  • getElement:动态获取
  • querySelector:静态获取

DOM的节点

1.nodeType 返回节点类型

  • 元素节点 返回1
console.log(oHeader.nodeType); //1
console.log(oText.nodeType); //1
  • 属性节点 返回2
var attrNode = oHeader.getAttributeNode("id");
    console.log(attrNode.nodeType);//2
  • 文本节点 返回3
var content = oHeader.firstChild; //获取第一个子节点
    console.log(content.nodeType);//3
  • 注释节点 返回8
console.log(oList.firstChild.nodeType);//8
  • document 返回9
console.log(document.nodeType);//9

2.nodeName 返回节点名称

  • 元素节点 返回大写的标签名
console.log(oHeader.nodeName); //H2
console.log(oText.nodeName); //P
  • 属性节点 返回属性名
console.log(attrNode.nodeName); //id
  • 文本节点 #text
console.log(content.nodeName); //#text
  • 注释节点 #comment
console.log(oList.firstChild.nodeName);//#comment
  • document #document
console.log(document.nodeName);//#document

3.nodeValue 返回节点值

  • 元素节点 null
console.log(oHeader.nodeValue); //null
console.log(oText.nodeValue); //null
console.log(oItem.nodeValue); //null
  • 属性节点 返回属性值
console.log(attrNode.nodeValue); //header2
  • 文本节点 返回文本内容
console.log(content.nodeValue);//这是一个h2标签
  • 注释节点 返回注释内容
console.log(oList.firstChild.nodeValue);
  • document 返回null
console.log(document.nodeValue);//null

nodeTypenodeNamenodeValue
元素节点1大写的标签名null
属性节点2属性名属性值
文本节点3#text文本内容
注释节点8#comment注释内容
document9#documentnull

DOM元素的属性

1.获取元素的属性 getAttribute(“属性名”) 返回属性值（行内的属性） 查

console.log(oBox.getAttribute("id"));
console.log(oBox.getAttribute("class"));
console.log(oBox.getAttribute("style"));
console.log(oImage.getAttribute("alt"));

2.设置属性 setAttribute(“属性名”,“属性值”) 改

document.getElementById("tab").onclick=function(){
        // oBox.setAttribute("class","box2");
        oImage.setAttribute("src","./car.jpg")
    }

3.移除属性 removeAttribute(“属性名”) 删

document.getElementById("remove").onclick=function(){
        oBox.removeAttribute("style");
    }

4.创建属性 createAttribute(“属性名”) 自定义 增

var attr=document.createAttribute("abc");
    attr.value="自定义的属性";
    document.getElementById("add").onclick=function(){
        oBox.setAttributeNode(attr)
    }

DOM中HTML改变输出流

1.document.write()

// 入口函数   
// 当文档加载完成后 执行
window.onload = function () {
    document.write("改变输出流");//会覆盖文档
}

2.document.writeln 换行

document.write("<pre>");
    document.writeln("改变输出流1");
    document.writeln("改变输出流2");
    document.writeln("改变输出流3");
    document.writeln("改变输出流4");
document.write("<pre/>");

//需要<pre></pre>

DOM中HTML改变输出内容

1.innerHTML 属性 获取/设置元素的内容(可以解析标签)

aBtns[0].onclick=function(){
     oBox.innerHTML="<b style='color:yellow'>这是通过innerHTML设置的内容</b>"
    }

2.innerText 属性 获取/设置元素的文本内容

aBtns[1].onclick=function(){
        // oBox.innerHTML="这是通过innerText设置的内容"
        oBox.innerText="<b style='color:yellow'>这是通过innerText设置的内容</b>"
    }

3.outerHTML 属性 获取/设置元素的内容 包含自身

console.log(oBox.outerHTML);

4.outerText 属性 获取/设置元素的文本内容

console.log(oBox.outerText);

DOM中HTML改变输出属性

1.src 属性 路径属性 获取/设置文件的路径

console.log(oImage.getAttribute("src"));

console.log(oImage.src);

aBtns[0].onclick=function(){
        oImage.src="./128.png"
    }

2.className 属性 获取/设置元素的类名

console.log(oHeader.getAttribute("class"));

console.log(oHeader.className);

    aBtns[1].onclick=function(){
        oHeader.className="shuishen xiaomihu"
    }

3.style 属性 获取/设置元素的样式（仅限于行内样式）

console.log(oHeader.style);//返回样式对象

console.log(oPara.style.color);

aBtns[2].onclick=function(){
    oHeader.style="color:pink"
    oHeader.style.color="pink"
    
    oHeader.style="background-color:pink"//-无法生效
    oHeader.style.backgroundColor="pink";//驼峰
    }

DOM节点的查找(遍历)
遍历(Traversal)，是指沿着某条搜索路线，依次对树（或图）中每个节点均做一次访问
通过某一个元素查找另外一个元素

  • 父子元素

1.children 返回子(元素)节点，不包含文本(空)节点

console.log(oWrap.children);//

2.childNodes 返回子节点，包含文本(空)节点

console.log(oWrap.childNodes);//text  空文本

3.firstElementChild 第一个子(元素)节点，不包含空节点

console.log(oWrap.firstElementChild.firstChild);

4.firstChild 第一个子节点，（包含文本）

console.log(oWrap.firstChild);

5.lastElementChild 最后一个子(元素)节点，不包含空节点

console.log(oWrap.lastElementChild);

6.lastChild 最后一个子节点，（包含文本）

console.log(oWrap.lastChild);//#text

7.parentNode 返回父级节点

console.log(oBox.parentNode.parentNode);

8.parentElement 返回父级（元素）节点

console.log(oBox1.parentElement);

9.offsetParent 相对关系 返回第一个有定位属性的祖先元素 ，如果没有，则返回body

console.log(oBox.offsetParent);

// 链式操作
    console.log(oWrap.firstElementChild.firstElementChild);
  • 兄弟(同胞)元素

10.nextElementSibling 下一个兄弟(元素)节点

console.log(oBox.nextElementSibling.nextElementSibling);

11.nextSibling 下一个兄弟节点，包含文本

console.log(oBox.firstChild.nextSibling);
console.log(oBox.nextSibling);

12.previousElementSibling 前一个兄弟节点，不包含文本

console.log(oBox.previousElementSibling);

13.previousSibling 返回上一个兄弟节点 包含文本

console.log(oBox.previousSibling);

DOM添加节点（增）

1.创建节点 createElement(“标签/元素节点名”)

var newP1=document.createElement("P");
    newP1.innerText="这是新创建的段落标签05";
    newP1.style.background="skyblue";

2.appendChild() 向父元素的子节点末尾添加元素（追加）

oBox.appendChild(newP1);  
oBox.appendChild(newP2);  
oBox.appendChild(newP3);

3.insertBefore(添加的节点,参考的兄弟元素)

oBox.insertBefore(newP1,aParas[1]);

DOM移除节点（删）

removeChild(要移除的元素)

oBox.removeChild(aParas[3]);

DOM替换元素（改）

replaceChild(新元素,旧元素)

oBox.replaceChild(newP1,aParas[1]);
举报

相关推荐

JavaScript DOM

事件处理选择器HTMLJavaScript前端开发

【JavaScript】DOM

javascript前端html

javascript dom

javascriptViewUIxmlHTMLXMLHarmonyOS后端开发

javascript DOM的操作

javascriptHTML选择器JavaScript前端开发

JavaScript中的Dom

javascripthtmlhtml5添加节点表单JavaScript前端开发

【JavaScript】DOM的其他查询

javascript前端html元素节点属性值云平台云计算

JavaScript Dom编程

javascript

JavaScript HTML DOM

javascripthtml前端

JavaScript：DOM操作

1024程序员节html元素节点删除节点编程语言

JavaScript-Dom的操作

前端js
0 条评论