<h2>这是一个home组件--DOM操作演示</h2>
<div id="box">
this is box
</div>
<br>
<div id="box1" *ngIf="flag">
this is box1
</div>
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit { public flag:boolean=true; constructor() { } ngOnInit() { //组件和指令初始化完成 并不是真正的dom加载完成 let oBox:any=document.getElementById('box'); console.log(oBox.innerHTML);
oBox.style.color="red"; //获取不到dom节点
/*
let oBox1:any=document.getElementById('box1'); console.log(oBox1.innerHTML);
oBox1.style.color="blue"; */ } //视图加载完成以后触发的方法 dom加载完成 (建议把dom操作放在这个里面)
ngAfterViewInit(){
let oBox1:any=document.getElementById('box1');
console.log(oBox1.innerHTML);
oBox1.style.color="blue"; } }

效果:

angular 中的dom操作(原生JS)的更多相关文章

  1. Angular @ViewChild,Angular 中的 dom 操作

    Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.st ...

  2. Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法

    <app-header #header></app-header> <div #myBox> 我是一个dom节点 </div> <button ( ...

  3. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  4. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  5. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  6. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  7. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  8. 第三章(jQuery中的DOM操作)

    3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...

  9. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

随机推荐

  1. Make 和 Makefile快速入门

    前言 一个项目,拥有成百上千的源程序文件,编译链接这些源文件都是有规则的.Makefile是整个工程的编译规则集合,只需要一个make命令,就可以实现“自动化编译”.make是一个解释makefile ...

  2. brew install thrift

    ➜ ~ brew install thriftUpdating Homebrew...Warning: You are using macOS 10.11.We (and Apple) do not ...

  3. The 2019 Asia Nanchang First Round Online Programming Contest The Nth Item

    The Nth Item 思路: 先用特征根法求出通向公式,然后通向公式中出现了\(\sqrt{17}\),这个可以用二次剩余求出来,然后可以O(\(log(n)\))求出. 但是还不够,我们先对\( ...

  4. k8s的认证授权

    一.ServiceAccount Service account是为了方便Pod里面的进程调用Kubernetes API或其他外部服务而设计的.它与User account不同   User acc ...

  5. 全球化 System.Globalization.CultureInfo与RegionInfo类

    一.CultureInfo类:文化信息 分类: 1.中立文化(Neutral culture): zh-CHS:中文,无区域信息,无格式化信息 2.特定区域文化(Specific culture) z ...

  6. 2020还有9天!Winforms开发有哪些期待?DevExpress 2020计划出炉

    下载DevExpress v19.2完整版 DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.DevExpress Winf ...

  7. python - Flask 基础 - 蓝图( Blueprint )(2)

    """ 蓝图:为开发者提供的目录结构 - 使用: 1. 根目录创建一个跟项目名一样的文件 - 创建后第一步,在这个文件夹中添加一个 __init__.py 的配置文件 - ...

  8. h5css样式

    兼容性前缀: 谷歌:webkit 火狐:moz ie:ms 欧鹏:o选择器: 属性选择器: * = 包含 {href * = 'www'} ^ = 以什么开头 $ = 以什么结尾 伪类选择器: 第一个 ...

  9. hive优化,开启压缩功能

    1.开启hive作业mapreduce任务中间压缩功能: 对于数据进行压缩可以减少job中map和reduce task间的数据传输量.对于中间数据压缩,选择一个低cpu开销编/解码器要不选择一个压缩 ...

  10. 35 | join语句怎么优化?

    在上一篇文章中,我和你介绍了 join 语句的两种算法,分别是 Index Nested-Loop Join(NLJ) 和 Block Nested-Loop Join(BNL). 我们发现在使用 N ...