如何在angular渲染完dom以后执行js代码

JavaScript023

如何在angular渲染完dom以后执行js代码,第1张

在angular渲染完dom以后执行js代码的方法是使用init方法完成dom初始化,同时控制器中写入需要执行的js代码即可。

1、html代码:

<div

data-ng-controller="myCtrl"

data-ng-init="init()"></div>

2、定义的angularjs方法如下:

$scope.init

=

function

()

{

if

($routeParams.Id)

{

//创建一个新对象的js代码

createElement()

}

else

{

//创建一个新对象的js代码

createElement()

}

$scope.isSaving

=

false

}

...

$scope.init()

DOM(即 Document Object Mode) 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

其中,在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。

DOM 处理中的常见错误是希望元素节点包含文本。

举个栗子:<title>DOM 教程</title>,元素节点 <title>,包含值为 "DOM 教程" 的文本节点。

可通过节点的 innerHTML 属性来访问文本节点的值。

一些常用的 HTML DOM 方法:

getElementById(id) - 获取带有指定 id 的节点(元素)

appendChild(node) - 插入新的子节点(元素)

removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性:

innerHTML - 节点(元素)的文本值

parentNode - 节点(元素)的父节点

childNodes - 节点(元素)的子节点

attributes - 节点(元素)的属性节点

DOM操作示例

<html>

    <body>

        <p id="p1">Hello World!</p>

        <script>

            document.getElementById("p1").innerHTML="New text!"

            //内容变更为new text

            document.getElementById("p1").style.color="blue"

            //蓝色

        </script>

    </body>

</html>

首先 nextSibling 并不是所有浏览器执行后 结果都是一样的!

这是我写的:

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>Document</title>

</head>

<body>

<p>This is One </p>

<p>This is Two </p>

<script>

var p = document.getElementsByTagName("p")

p[1].innerHTML= "This is Change"

</script>

</body>

</html>

我用一个变量接收整个页面有多少个p标签

然p是一个数组 数组从0开始 我要操作第二个 我就p[1] 来操作他

这里 我改变了第二个p标签的值 !