重点掌握选择器获取,其他仅做了解
小技巧:如果API写的是Emement复数的形式,也就是后面加了s(Emements)那么它返回的就是一个伪数组 否则就是单个对象,一般只有id才会是单个对象,其他方式获取(标签名 类名)都是伪数组.
注意点:根据类名className获取元素存在浏览器兼容问题,IE8及以下不支持,一般很少使用。
<div id="box">我是班长
<p>我是班长小迷妹</p>
</div>
<script>
var box = document.getElementById("box");
//2.innertHTML:获取元素内容(包含标签与文本)
console.log(box.innerHTML);
//1.innerText:获取元素文本(包含子标签的文本)
console.log(box.innerText);
//覆盖原来的内容,innerText:会把所有的内容都当成文本,无法解析标签
box.innerText = '<a>我是i连接</a><p>我是p</p>';
//覆盖原来的内容,可以解析字符串中的标签,和document.write()一样动态给页面添加元素
box.innerHTML = '<a>我是i连接</a><p>我是p</p>';
</script>
3.总结:js点语法操作属性与attribute语法操作属性场景(语义不同)
<html lang="en">
<head>
<title>Document</title>
<style>
.one {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!--如果一个属性不是html中得属性,那么这个属性成为自定义属性-->
<div id="div1" class="one" aaa='啊啊啊啊'></div>
<script>
//1.js点语法属性操作
var div1 = document.getElementById("div1");
console.log(div1.id); //div1
div1.index = 1;
console.log(div1.index); //1
div1.setAttribute("age", 18);
//自定义属性和setAttribut属性无法通过点语法获得
console.log(div1.age); //undefined
console.log(div1.aaa); //undefined
//getAttribute可以获取行内标准属性和自定义属性
console.log(div1.getAttribute("age")); //18
console.log(div1.getAttribute("aaa")); //啊啊啊啊
console.log(div1.getAttribute("class")); //one //行内标准属性 类名直接class即可
//行内标准属性可以用点语法获得
console.log(div1.className); //one
//2. attribute方式
/*获取属性: 元素.getAttribute('属性名')
添加属性:元素.setAttribute('属性名',属性值);
* 用setAttribute方式添加只能用getAttribute获取
删除属性: 元素.removeAttribute('属性名');
* a.属性名属性值全部删除,更加彻底
* b.点语法只能删除属性值,不能删除属性名
总结:js点语法操作属性与attribute语法操作属性场景
标准属性:点语法(简洁)
自定义属性:attribute(代码易读性更高)
*/
//不能获取
console.log(div1.getAttribute("style.width")); //行外属性
console.log(div1.getAttribute("index")); //js点动态添加的属性
//添加属性
div1.setAttribute("index", 3);
console.log(div1);
console.log(div1.index); //1
console.log(div1.getAttribute("index")); //3
div1.removeAttribute("index");
console.log(div1.getAttribute("index"));//null
</script>
</body>
</html>
HTML页面中的所有内容都会体现在DOM文档树中,要理解这种结构,对构成它的每个节点就要先有了解。下面是DOM节点的基本类别,以及各自类别基本属性的值及简单介绍:
<div class="one" id="box">我是一个div</div>
<p class="one" id="p1">我是一个p</p>
<script>
//1.获取元素节点
var box = document.querySelector("#box");
var p1 = document.querySelector("#p1");
//2.查看元素节点
console.log(box.nodeType); //1 元素节点
console.log(box.nodeName); //DIV
console.log(box.nodeValue); //null
console.log(p1.nodeType); //1元素节点
console.log(p1.nodeName); //p
console.log(p1.nodeValue); //null
//3.获取到属性节点
//这个只是单纯的获取class属性的值,不是获取属性节点
console.log(box.getAttribute("class")); //one
//查看box元素的所有属性节点
console.log(box.attributes); //NamedNodeMap {0: class, 1: id, class: class, id: id, length: 2}
//4.查看属性节点
console.log(box.attributes[0].nodeType); //2 属性节点
console.log(box.attributes[0].nodeName); //class
console.log(box.attributes[0].nodeValue); //one
</script>
<ul id = "main">
<!-- 这里是li标签注释 -->
<li>
111
<a href="#">li111111</a>
aaa
</li>
<li><a href="#">li222222</a></li>
<li><a href="#">li333333</a></li>
</ul>
<script>
//获取main元素节点
var main = document.querySelector("#main");
// var liList = document.querySelectorAll("#main li");
//获取元素节点下的所有子节点(元素之间的空格部分可以看作一个没有内容的文本节点)
var liList= main.childNodes;
console.log(liList);//NodeList(9) [text, comment, text, li, text, li, text, li, text]
//查看注释节点
console.log(liList[1].nodeType);//8 注释节点
console.log(liList[1].nodeName);//#comment
console.log(liList[1].nodeValue);//这里是li标签注释
//查看文本节点
console.log(liList[2].nodeType);//3 文本节点
console.log(liList[2].nodeName);//#text
console.log(liList[2].nodeValue);// 空值 因为liList[2]为一个空格
console.log(liList[3].childNodes);//li元素节点下的子节点 NodeList(3) [text, a, text]
console.log(liList[3].childNodes[0].nodeType);//3 文本节点
console.log(liList[3].childNodes[0].nodeName);//#text
console.log(liList[3].childNodes[0].nodeValue);// 111
//查看文档节点(文档节点就是document自己)
console.log(document.nodeType);//9
console.log(document.nodeName);//#document
console.log(document.nodeValue);//null
</script>
<ul id="ul1">
我是班长的小迷妹
<!-- 我是暗恋班长的班花 -->
<li>我是班长1</li>
<li>我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
var ul1 = document.querySelector('#ul1');
//获取子元素:元素节点
/*
谷歌火狐:元素节点
IE8:包含注释和元素
*/
console.log(ul1.children); //HTMLCollection(5)
//获取子元素节点:元素节点 文本节点 注释节点
/*
谷歌火狐: 包含空文本
IE8: 不包含空文本
*/
console.log(ul1.childNodes); //NodeList(13)
</script>
获取兄弟节点与兄弟元素
<ul id="ul1">
我是班长的小迷妹
<!-- 我是暗恋班长的班花 -->
<li>我是班长1</li>
<!-- svkhskvhb -->
<li id="li2">我是班长2</li>666
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
var ul1 = document.querySelector('#ul1');
var li2 = document.querySelector('#li2'); //班长2
//1.兄弟节点:元素、注释、文本
//1.1获取上一个节点
console.log(li2.previousSibling);//#text 是一个空字符
//1.2获取下一个节点
console.log(li2.nextSibling);//666
//2.兄弟元素:元素
//2.1获取上一个元素
console.log(li2.previousElementSibling); //<li>我是班长1</li>
//2.2获取下一个元素
console.log(li2.nextElementSibling);//<li>我是班长3</li>
</script>
他们的浏览器兼容问题与兄弟节点一致
<ul id="ul1">
我是班长的小迷妹
<li>我是班长1</li>
<!-- svkhskvhb -->
<li id="li2">我是班长2</li>666
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
<!-- 我是暗恋班长的班花 -->
</ul>
<script>
var ul1 = document.querySelector('#ul1');
//1.获取第一个子节点(元素 文本 注释)
console.log(ul1.firstChild); //我是班长的小迷妹
//2.获取第一个子元素:元素
console.log(ul1.firstElementChild); //<li>我是班长1</li>
//3.获取最后一个子节点
console.log(ul1.lastChild); //#text 空字符
//4.获取最后一个子元素
console.log(ul1.lastElementChild); //<li>我是班长5</li>
</script>
parentNode:获取元素的父元素节点
<ul id="ul1">
我是班长的小迷妹
<li>我是班长1</li>
<!-- svkhskvhb -->
<li id="li2">我是班长2</li>666
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
<!-- 我是暗恋班长的班花 -->
</ul>
<script>
//获取元素的父节点: 子元素.parentNode
var li2 = document.getElementById('li2');
//获取元素的父节点一定是元素。 (因为只有元素节点才会有节点)
console.log(li2.parentNode); //<ul id="ul1">
console.log(li2.parentNode.parentNode); //body
console.log(li2.parentNode.parentNode.parentNode); //html
console.log(li2.parentNode.parentNode.parentNode.parentNode); //document
console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode); //null
//获取父元素节点
console.log(li2.parentElement); //<ul id="ul1">
//当父节点的nodeType不是1,即不是element节点的话,它的parentElement就会是null
console.log(li2.parentElement.parentElement.parentElement.parentElement); //null
</script>
appendChild()添加元素有三种情况
insertBefore:插入子元素到指定位置
父元素.insertBefore(要插入的标签,插入到哪一个标签前面)
父元素.replaceChile(新元素,旧元素)
removeChild:移除子元素 语法:
父元素.removeChild(子元素)
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。