Document Object Model(DOM)

HTML基本结构如下:

<! DOCTYPE html>
<html>
    <head>
        <title> My Title </title>
    </head>
<body>
    <h1>A heading </h1>
    <a href= “websiteLink”>Link text</a>
</body>

对应的DOM结构如下:


查看html:

document

查看对象object:

console.dir(document)

document属性:

  • document.URL
  • document.body
  • document.head
  • document.links

document方法:

  • document.getElementById()
  • document.getElementByClassName()
  • document.getElementsByTagName()
  • document.querySelector()
  • document.querySelectorAll()

通过id,找到CSS第一个id标签的方法:

document.querySelector("#pick me")

找到所有的 li 标签:

document.querySelectorAll("li")

(9) [li, li, li, li, li, li, li, li, li]

e.g.修改h1为红色

var myheader = document.querySelector("h1")
myheader.style.color = 'red';


修改h1为随机的颜色

// Grab the Header with h1
var header = document.querySelector("h1")

// Then you can interface with the object.

// Interface with the style.
//You will see a ton of options show up!
header.style.color = 'red'

// Now let's connect it to the script to
// change it once every second to a random color!

// Random Color Function:

// http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor(){
  var letters = "0123456789ABCDEF";
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random()*16)];
  }
  return color
}

// Simple function for clarity
function changeHeaderColor(){
  colorInput = getRandomColor()
  header.style.color = colorInput;
}

// Now perform the action over intervals (milliseocnds):
setInterval("changeHeaderColor()",500);

获取到对象后进行操作:

  • myvariable.style.color (Many CSS options)
  • myvariable.textContent -修改文本
  • myvariable.innerHTML -修改html
  • myvariable.getAttribute()-获取属性值
  • myvariable.setAttribute() -修改属性值

修改段落 p 中的内容:

 p = document.querySelector("p")
p.textContent = "this is text coment"
p.innerHTML = " bold text content"

html:

<h4 id = "special">this is h4
    <a href="https://www.baidu.com">baidu link</a>
</h4>

根据id获取h4,再获取链接a,修改链接到bing

var special = document.querySelector("#special")
specialAlink = special.querySelector("a")
specialAlink.getAttribute("href") 
specialAlink.setAttribute("href","https://bing.com")

DOM Events

监听事件 event

  • myvariable.addEventListener(event,func);

An example,点击h2标题变为红色:

var head = document.querySelector('h2');
head.addEventListener("click",changeColor);


function changeColor(){
    var head = document.querySelector('h2');
      head.style.color = 'red';    
}

事件event:

  • Clicks
  • Hovers
  • Double Clicks
  • Drags
  • Much More!

https://developer.mozilla.org/en-US/docs/Web/Events

例子的HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1 id='one'>Hover Over Me!</h1>

    <h1 id='two'>Click Me!</h1>

    <h1 id='three'>Double Click Me!</h1>

  </body>
  <script src='Part3_Events.js'>  </script>
</html>

Part3_Events.js 如下:

var headOne = document.querySelector('#one')
var headTwo = document.querySelector('#two')
var headThree = document.querySelector('#three')

// Hover (mouseover and mouseout) 悬浮
headOne.addEventListener('mouseover',function(){
  headOne.textContent = "Mouse currently Over";
  headOne.style.color = 'red';
})

headOne.addEventListener('mouseout',function(){
  headOne.textContent = "Mouse Not On me."
  headOne.style.color = 'blue';
})


// On Click 一次点击
headTwo.addEventListener("click",function(){
  headTwo.textContent = "Clicked On";
  headTwo.style.color = 'blue';
})

// Double Click  双击
headThree.addEventListener("dblclick",function(){
  headThree.textContent = "Double Clicked!";
  headThree.style.color = 'red';
})


 




发表评论

电子邮件地址不会被公开。 必填项已用*标注