首页 > 编程语言 >08JavaScript之JavaScript操作DOM对象方法

08JavaScript之JavaScript操作DOM对象方法

时间:2022-12-09 12:34:46浏览次数:40  
标签:body 08JavaScript DOM JavaScript innerHTML firstChild var document 节点


通过元素类型的方法来操作:

  1. document.getElementById();//id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖id
  2. document.getElementsByTagName();//标签名
  3. document.getElementsByClassName();//类名
  4. document.getElementsByName();//name属性值,一般不用
  5. document.querySelector();//css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null
  6. document.querySelectorAll()//css选择符模式,返回与该模式匹配的所有元素,结果为一个类数组

所有节点都有nodeType属性,代表节点的不同类型,通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型:

  1. Element类型(元素节点):nodeType值为 1
  2. Text类型(文本节点):nodeType值为 3
  3. Comment类型(注释节点):nodeType值为 8
  4. Document类型(document节点):nodeType值为 9;其规定的一些常用的属性有
  5. document.body document.head 分别为HTML中的 ​​<body><head>​
  6. document.documentElement为标签
  7. 所有的节点都有 hasChildNodes()方法 判断有无子节点 有一个或多个子节点时返回true】

通过一些属性可以来遍历节点树:

  1. parentNode//获取所选节点的父节点,最顶层的节点为#document
  2. childNodes //获取所选节点的子节点们
  3. firstChild //获取所选节点的第一个子节点
  4. lastChild //获取所选节点的最后一个子节点
  5. nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
  6. previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null

基于元素节点树的遍历(遍历元素节点树):

  1. parentElement //返回当前元素的父元素节点(IE9以下不兼容)
  2. children // 返回当前元素的元素子节点
  3. firstElementChild //返回的是第一个元素子节点(IE9以下不兼容)
  4. lastElementChild //返回的是最后一个元素子节点(IE9以下不兼容)
  5. nextElementSibling //返回的是后一个兄弟元素节点(IE9以下不兼容)
  6. previousElementSibling //返回的是前一个兄弟元素节点(IE9以下不兼容)

示例:

1、DOM节点

<img src="images/fruit.jpg" alt="水果" id="fruit"/>
<h1>喜欢的水果</h1>
<p>DOM应用</p>

节点还包括文本节点,例如空格或换行
<script type="text/javascript">
var img = document.getElementById("fruit");
alert(img.parentNode.innerHTML);
//alert(img.parentNode.innerText);
var body = document.getElementsByTagName("body")[0];
//alert(body.childNodes[3].innerHTML);
//alert(body.firstChild.nextSibling.nextSibling.nextSibling.innerHTML);
body.childNodes:body下面的所有子节点
for (var i = 0; i < body.childNodes.length; i++) {
if (body.childNodes[i].nodeType == 1) {
alert(body.childNodes[i].innerHTML+"111111");
}
else if (body.childNodes[i].nodeType == 3) {
alert(body.childNodes[i].nodeValue+"33333");
}

}
//alert(body.firstElementChild.nextElementSibling.nextElementSibling.innerHTML);
</script>

2、访问节点

<section id="news">
<header>京东快报<a href="#">更多 > </a></header>
<ul>
<li><a href="#">志玲姐姐:墨镜300减30</a></li>
<li><a href="#">京东无锡馆正式启动</a></li>
<li><a href="#">99元抢平板!品牌配件199-100</a></li>
<li><a href="#">节能领跑京东先行</a></li>
<li><a href="#">高洁丝实力撩货,领券五折</a></li>
</ul>
</section>
<script>
var obj = document.getElementById("news");
//var str = obj.lastChild.firstChild.innerHTML;
//var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
//var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
//var str=obj.lastElementChild.lastElementChild.innerHTML;
alert(str);

</script>

3、节点信息

<ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p>
<script>
var nodes=document.getElementById("nodeList");
var type1=nodes.firstChild.nodeType; //1
var type2=nodes.firstChild.firstChild.nodeType; //3
var name1=nodes.firstChild.firstChild.nodeName; //#text
var str=nodes.firstChild.firstChild.nodeValue; //nodeName
var con="type1:"+type1+"<br/>type2:"+type2+"<br/>name1:"+name1+"<br/>str:"+str;
document.getElementById("nodeList").nextSibling.innerHTML=con;
</script>

要分清元素的value属性和nodeValue 不一样,nodeValue适用于“文本节点”和“属性节点”;对应“文档节点”和“标签节点”不起作用


标签:body,08JavaScript,DOM,JavaScript,innerHTML,firstChild,var,document,节点
From: https://blog.51cto.com/u_15907536/5924869

相关文章

  • 论文解读(MDFEND)《MDFEND: Multi-domain Fake News Detection》
    论文信息论文标题:MDFEND:Multi-domainFakeNewsDetection论文作者:JunjieLi,YixinZhang,ZileiWang,KeyuTu论文来源:aRxiv2022论文地址:download 论文代码:downlo......
  • js利用Random获取随机值
    js利用Random获取随机值JS生成指定范围内的随机数(支持随机小数)-jack_Meng-博客园(cnblogs.com)Math:数学对象,提供对数据的数学计算。1.Math.random();返回为0-1间......
  • JavaScript入门⑨-异步编程●异世界之旅
    JavaScript入门系列目录JavaScript入门①-基础知识筑基JavaScript入门②-函数(1)基础{浅出}JavaScript入门③-函数(2)原理{深入}执行上下文JavaScript入门④-万物皆......
  • JavaScript:操作符: 逗号运算符
    逗号运算符,是极少见的运算符,我们看一下代码理解一下逗号运算符的功能:先说结论,逗号运算符的优先级非常低,比赋值运算符=还要低;同时,逗号隔开的几个表达式,都会各自进行计算,......
  • JavaScript:操作符: 空值合并运算符(??)
    这是一个新增的运算符,它的功能是:对于表达式1??表达式2,如果表达式1的结果是null或者undefined时,返回表达式b的结果;否则返回表达式a的结果;它与赋值运算符结合使用,即??=,即......
  • JavaScript:操作符:操作符的特点
    在JS中,所有的操作符,都同时在做两件事,第一件事是进行计算,第二件事是返回计算的结果,这个结果需要有变量去接收,否则就成为无人认领的数据而被垃圾回收;在JS中,有很多不常用的......
  • JavaScript:操作符:正负号和自增自减及其隐式转换
    正负号正号即加号,负号即减号,运算结果同数学意义一样;对非数字类型进行正负号运算,会隐式转换为数字,再进行运算;一些特殊的非数字,转换情况同算术运算符;自增自减自增即为++......
  • JavaScript:操作符:比较运算符及其隐式转换
    不等关系即大于>;大于等于>=;小于<;小于等于<=当比较的两个变量,有非数字时,会隐式转换为数字再比较,转换情况同算术运算符;当两个变量均为字符串时,不会进行转换,而是逐位比较......
  • JavaScript:操作符:逻辑运算符及其隐式转换
    逻辑非!用来对布尔值进行取反,即!true=false;当取反的变量不是布尔值,会进行隐式转换为布尔值:非0的数字,都转换为true非空字符串,转换为true非空对象,转换为trueInf......
  • JavaScript:操作符:算术运算符(加减乘除模幂)及其隐式转换
    加法+减法-乘法*除法/模运算%幂运算**,即a**b求的是a的b次方执行上述运算时,当两个操作数有非数字时,JS会隐式转换为数字,再进行运算;一些特殊的非数字,会进行如下转......