Js核心—— DOM

最新推荐文章于 2022-09-04 18:50:20 发布

是福不是祸

最新推荐文章于 2022-09-04 18:50:20 发布

阅读量169

点赞数 1

分类专栏： Js核心—— DOM 文章标签： Js核心—— DOM

本文链接：https://blog.csdn.net/weixin_44391612/article/details/86633682

版权

Js核心—— DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM：document objert model 文档对象模型

BOM:browser object model 浏览器对象模型

节点：
               节点种类：元素节点(标签)   文本节点(内容) 属性节点   等十二种
               节点关系：兄弟节点   父子关系    父节点子节点兄弟节点
               节点对象：属性和方法

innerHTML 开始标记和结束标记之间的内容
document 文档对象
body

节点对象的属性：
               childNodes     获取所有的子节点(元素节点、文本节点)    NodeList   索引 0    length 节点个数
               firstChild
               lastChild
               parentNode 父节点
               previousSibling   上一个兄弟节点
               nextSibling    下一个兄弟节点

案例

<body>
	<div id="box">
		<div>你好</div>
		<div>我好</div>
	</div>

	<div id="content">
		<p>AAAA</p>
		<p>AAAA</p>
		<p>AAAA</p>最后
	</div>

	<ul id="banner"><li>AAA</li><li>AAA</li><li>AAA</li></ul>
</body>

<script type="text/javascript">
	// console.log(document.body);//body元素节点
	// var bd=document.body;//body

	var o=document.getElementById('box');

	var cs=o.childNodes;//子节点
	// console.log(cs[1]);
	cs[1].innerHTML='hello world';//修改内容
	cs[3].innerHTML='哈哈哈';
	console.log(o.firstChild);//第一个孩子
	console.log(cs.length);


	var o1=document.getElementById('content');
	var os=o1.childNodes;//
	os[3].innerHTML='BBBB';
	console.log(os);
	console.log(os.length);//子节点个数
	os[os.length-2].innerHTML='CCCC';
	os[3].style.color='red';
	console.log(o1.lastChild);//最后一个孩子


	var oUl=document.getElementById('banner');
	var os1=oUl.childNodes;
	console.log(os1);
	os1[2].innerHTML='CCCC';
	oUl.lastChild.innerHTML='DDDD';//连缀
	oUl.firstChild.innerHTML='aaa';

	var pN=oUl.lastChild.parentNode;//父节点
	console.log(pN);//
</script>

document 文档对象

               属性：
                   body         body元素对象
                   title        标题
                   URL        网页地址

                   links          超链接    HTMLCollection 集合索引 0       length
                   images         图片
                   forms

               方法：
                   write
                   writeln
                   getElementById      根据ID查找节点对象
                            返回值：   节点对象，null

案例

<body>
	<div id="box">
		<div>AAA</div>
		<div>BBB</div>
		<a href="#">太</a>
		<a href="#">光</a>
		<a href="#">顿</a>
		<div>CCC</div>

	</div>
	<div>
		<img src="img/a1.jpg" alt="">
		<img src="img/a1.png" alt="">
		<img src="img/a1.gif" alt="">	
	</div>
</body>
<script type="text/javascript">
     var o=document.getElementById('box');//获取元素
     var os=o.childNodes;
     console.log(os);   //子节点
     console.log(os[1]);
     os[1].innerHTML='大河之剑天上来';
     o.lastChild.previousSibling.innerHTML='QQQ'; //改变子子节点
     document.links[2].innerHTML='巨'; 
     document.title='document呀'; 
     document.images[0].src='img/a1.gif';  改变图片内容
     document.write(document.links.length);

</script>

节点操作：增删改查

           增：
               write
               document.createElement      创建节点
               obj.appendChild        追加子节点
           删除节点：
               obj.removeChild
           复制节点：
               cloneNode(flag)
                   flag 布尔类型    true 复制包含子节点 false 不包含子节点默认为false
        案例

<script type="text/javascript">
		var op=document.createElement('p');//创建节点对象
		op.innerHTML='哈哈哈';//为节点对象添加内容
		console.log(op);

		// document.body.appendChild(op);//将节点对象添加到body中
		var o=document.getElementById('box');
		o.appendChild(op);//将节点对象添加到div中
	</script>

小案例

<div id="box">
    <div>AAA</div>  	
    <div>BBB</div>
    <div>CCC</div> 
 </div> -->
  
    var o=document.getElementById('box');
 	 var o2= o.childNodes[1];
 	o.removeChild(o2);          //复制节点
  var p=document.createElement('p');
     p.innerHTML='你好';
 	 o.insertBefore(p,o2);
          o.replaceChild(p,o2);
         var a1=o2.cloneNode(true);
 	 o2.appendChild(a1);            //插入节点





 爱好：
 <input type="checkbox">游戏
 <input type="checkbox" id="a1">唱歌
 <input type="checkbox">跳舞
 <br>
 职业:
 <input type="radio"name="sex">歌手
 <input type="radio"name="sex">舞者
 <input type="radio"name="sex" id="b1">流浪


 var a=document.getElementById('a1');
  a.checked=true;
      var b=document.getElementById('b1');
     b.checked=true;

是福不是祸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js核心—— DOM

DOM：document objert model 文档对象模型BOM:browser object model 浏览器对象模型节点：节点种类：元素节点(标签) 文本节点(内容) 属性节点等十二种节点关系：兄弟节点父子关系父节点子节点兄弟节点节点对象：属性和...
复制链接

扫一扫